html - 这个布局怎么做？ (换行，居中)

Question

#container
{
    text-align: center;
    background-color: green;
}

.box
{
    display: inline;
    margin-left: 50px;
}

<div id="container">
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
</div>

http://jsfiddle.net/VfKa4/

这是我目前为止。我想实现这个:

---

根据蓝框的个数，只有3个可以上一行。另一个转到新行，但必须居中。但是不知道margin怎么做，因为不需要左右margin，还是要有距离

Answer 1

将 width:400px 添加到您的容器(这将适合三个 100px 的图像，它们之间的边距为 50px)，并添加以下规则:

.box:nth-child(3n+1) {margin-left:0}

另请注意，要使用 display:inline-block，元素之间不能有任何空格，因为这会弄乱您的布局。

Updated Fiddle