怎么做这个布局？ （打破新线，居中）

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个可以去一条线。另一个去新线，但必须集中。但我不知道如何做保证金，因为不需要左右边距，仍然需要彼此保持距离

Answer 1

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

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

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

Updated Fiddle

Answer 2

我认为display:inline-block就是你所追求的目标。

<强> JSFiddle Demo

<强> CSS

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container
{
    text-align: center;
    background-color: green;
    font-size:0;
    margin-bottom:10px;
}

.box
{
    display: inline-block;
    width:33%;
    margin-bottom:10px;
}

Answer 3

.box{
   margin: 0 auto;
}

这会将项目与中心对齐。您还可以通过更改0来设置边距值。

例如：margin: 20px auto;

Answer 4

<div id="container">
    <center>
<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>
    </center>
</div>