考虑以下

<div class="container">
     <div class="grid">
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
         <div class="unit"></div>
          ....
      </div>
</div>

使用图像，基本上是我拥有的是这样的事情

Using images, basically what I have is something like this

正如你可以看到绿色街区和容器左对齐

As you can see the green blocks and the container are aligned to the left

我想获得了这幅是这样的。

What I want to acheive is something like this.

在。单元元素具有恒定的宽度

在 .grid 元素宽度扩展（让更多的单元元素将融入1号线），而而总是在 .container 为中心的。

The .grid element should expand with width (so that more unit elements would fit into 1 line) while being always centered within .container.

任何线索如何做到这一点只用CSS（也许一些HTML包装如果需要的话）？

Any clue how to achieve that using only CSS (and maybe some html wrappers if necessary) ?

推荐答案

首先，我说这是一个有趣的问题，我的第一个念头是flexbox是解决这个问题的方法。我已经试过了flexbox安排的方式，但这种类型的解决方案躲避我。所以，下面是使用浮动，清除，和媒体查询的溶液

Let me begin by saying that this is an interesting question and my first thought was that flexbox is the way to solve this. I have tried all manner of flexbox arrangements, but this type of solution eluded me. So, below is the solution that uses floating, clearing, and media queries.

有关本例中，我已经假定每行将具有至少3个和不超过9盒。但是，你可以扩展这一解决方案的任何地方，以处理1和900多箱之间。

For this example, I have assumed that each row would have at least 3 and no more than 9 boxes. However, you can extend this solution to handle anywhere between 1 and more than 9 boxes.

下面的HTML：

<div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

下面是一个CSS（1）执行迷你复位，以消除浏览器应用填充和利润率可能与上浆干扰和（2）格式化 .grid 和其 DIV 孩子

Here's a CSS that (1) performs a mini-reset to eliminate browser-applied paddings and margins that may interfere with sizing and (2) formats the .grid and its div children:

* {
    margin: 0;
    padding: 0;
}

.grid {
    display: table;
    outline: 1px solid blue;
    min-width: 330px;
    margin: 0 auto;
}

.grid > div {
    width: 100px;
    height: 61px;
    margin: 5px;
    background-color: teal;
    float: left;
}

在 .container 块被淘汰，因为 .grid 显示为一个表。后者是shrinkwraps围绕其子块和保证金：0汽车可应用于居中在页面上。该 .grid 的最小宽度的330px保证了最少三个块可以每行适合。一个表格元素中每当浮动情况，其利润率不塌陷，花车因此没有明确的清算（例如，通过clearfix）是必要的。

The .container block was eliminated because .grid is displayed as a table. The latter is a block that shrinkwraps around its children and margin: 0 auto can be applied to center it on the page. The .grid's min-width of 330px assures that a minimum of three blocks can fit per line. Whenever floating happens within a table element, its margins do not collapse, therefore no explicit clearing of floats (e.g., via clearfix) is necessary.

每个 .grid DIV 子利用了水平空间110px（100像素宽+ 10px的左，右页边距） 。这个数字对于媒体查询code遵循以下重要的：

Each .grid div child takes 110px of horizontal space (100px width + 10px in left and right margins). This number is important for the media queries code that follows below:

@media screen and (min-width: 330px) and (max-width: 439px) {
    .grid > div:nth-of-type(3n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 440px) and (max-width: 549px) {
    .grid > div:nth-of-type(4n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 550px) and (max-width: 659px) {
    .grid > div:nth-of-type(5n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 660px) and (max-width: 769px) {
    .grid > div:nth-of-type(6n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 770px) and (max-width: 879px) {
    .grid > div:nth-of-type(7n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 880px) and (max-width: 989px) {
    .grid > div:nth-of-type(8n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 990px) {
    .grid > div:nth-of-type(9n + 1) {
        clear: left;
    }    
}

后面code的理由是：如果有足够的空间，以包括每行只n个块，然后每第（n + 1）个块的左边缘被清除，而移动块到一个新的生产线。

The rationale behind the code is this: if there is enough space to include only n blocks per line, then every (n + 1)th block's left edge is cleared, which moves the block to a new line.

和，这里有一个小提琴： http://jsfiddle.net/5hWXw/ 。调整了preVIEW窗口看调整。

And, here's a fiddle: http://jsfiddle.net/5hWXw/. Resize the preview window to see the adjustments.