1

我正在尝试在我的网页上创建一组照片（具有设定的宽度，我没有复制那部分代码）。我已将代码放入下面的 JSFiddle 链接中。

http://jsfiddle.net/T2qHR/12/

我将在图形编辑器上重新创建我想要做的事情。点击这里查看： http ://www.flickr.com/photos/adpartners/6630840127/in/photostream

我不确定我的 css/html 做错了什么。一切都卡在左边，因为我在我的一个 div 标签中使用了 float left。我真的希望背景居中，就是这样，然后将图像放在它的顶部，就像这样：3张照片，2张照片，1张照片，2张照片。他们都将链接到 youtube 视频，我已经获得了该部分的链接。

任何帮助将非常感激。我已经用
p、div、table、ol/li 标签完成了 10-20 种不同版本的代码，老实说，现在不知道该使用哪一个。

如果您发现我做错了什么，请填写我。我不知道代码了！

非常感谢您提供的任何帮助，R

4

1 回答 1

0

使用display: inline-blockandtext-align: center代替。

div.floatingPic { display: inline-block; padding: 12px; }

div.containerVid { border: 2px solid #99cc99;
                   background-color: #000000;
                   padding: 45px;
                   height: 890px;
                   border-radius: 10px;
                   margin-bottom: 25px;
                   text-align: center; }

只要.containerVid足够宽，图像就会继续堆叠，直到它们不再适合该行。如果您想提前强制休息，只需添加一个<br />（就像您一直在做的那样）。

小提琴：http: //jsfiddle.net/T2qHR/20/

于 2012-01-03T23:09:28.497 回答