您可以使用弹性盒子模型 http://dev.w3.org/csswg/css-flexbox/#intro，但也存在一些问题。
有一个旧的和一个新的 Flexbox 模型，这确实让事情变得有点复杂。目前仅Chrome 和 Opera http://caniuse.com/flexbox支持新模型，其他浏览器具有“部分支持”，这意味着它们可能支持：
- An 旧版本的 w3 规范 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
- An 旧语法 http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
- 或者他们只是还没有充分实施新的甚至旧的模型
凭借今天可用的一切，我能够将一些适用于的东西组合在一起铬26, Safari 5.1.7, IE10, IE9 模式下的 IE10 and IE8 模式下的 IE10。可悲的是，我现在的火狐浏览器版本 20不在该列表中。我不确定它是否适用于旧版本的 Firefox（我已在帖子底部附近的 jsFiddle 中添加了所需的 CSS，但我的 PC 上没有安装任何旧版本）。
This link https://developer.mozilla.org/en-US/docs/CSS/flex-wrap解释了为什么它不起作用火狐20。如果您向下滚动到页面底部，它会说明flex-wrap财产：
Firefox (Gecko) - 不支持。 Firefox 仅支持单行 Flexbox。
我对此不是 100% 确定，但在我看来，他们从未支持过flex-wrap即使在旧版本中也是如此。如果我错了，请纠正我火狐 19-那里有版本，但我想如果他们有的话，火狐20只要他们还没有完全实现新的弹性盒模型，至少就会依赖它。
This flex-wrap属性是使多行魔法在大多数其他浏览器中发生的属性。 预测是Firefox将完全支持版本 22 中的新 Flexbox 模型 http://caniuse.com/flexbox，即预计2013年6月25日上映 http://en.wikipedia.org/wiki/History_of_Firefox#Version_22.罢工>UPDATE: Firefox 现在支持 https://bugzilla.mozilla.org/show_bug.cgi?id=948654 the flex-wrap财产从版本 28 开始。 http://blog.dholbert.org/2013/12/multi-line-flexbox-support-in-nightly.html /UPDATE
毕竟，这是一个jsFiddle http://jsfiddle.net/4Xr5K/3根据我最近的研究，它可以很好地完成这项工作。在当前浏览器支持下，这似乎是您在纯 CSS + HTML 中可以做的最好的事情。
如果你想要更好的东西现在，你必须想出一个 JS 解决方案。也许看看来源flexieJS https://github.com/doctyper/flexie并修改浏览器检测代码，使其能够处理火狐20以及。box-pack and box-orient位于 FlexieJS 支持的属性列表中，它们是使此功能在较旧版本上工作的属性iOS and Safari.
Edit:正如 @Cimmanon 在评论中指出的那样，要使其在较旧的浏览器中工作，他们需要支持box-lines: multiple，但他们没有。所以这不适用于旧版本iOS, Safari and Firefox。我想这可以解释为什么火狐20没有旧的实现可以依靠。由于 FlexieJS 不支持box-lines: multiple或者，它的来源可能不会对解决这个问题有太大帮助。编写自己的 JS 修复似乎是唯一的方法现在解决方案。 FlexieJS 的开发者一直致力于新规范的polyfill https://github.com/doctyper/reflexie/branches。这必须包含一些代码来修复旧浏览器中的多行。但目前看来还没有。如果你想写点什么，也许你可以联系他以获得一些见解。如果你成功了，就把你的代码传给他。如果你幸运的话，他已经做了一些尚未在 GitHub 上发布的事情。
The CSS:
#container {
margin: 100px;
padding: 10px;
border: 1px solid blue;
display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
display: -moz-box; /* Firefox 19- */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Chrome */
display: flex; /* Opera 12.1, Firefox 20+ */
/* iOS 6-, Safari 3.1-6 */
-webkit-box-orient: horizontal;
-webkit-box-pack: justify;
-webkit-lines: multiple; /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */
/* Firefox 19- */
-moz-flex-flow: row wrap;
-moz-justify-content: space-between;
-moz-box-lines: multiple; /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */
/* Chrome */
-webkit-flex-flow: row wrap;
-webkit-justify-content: space-between;
/* IE10 */
-ms-flex-flow: row wrap;
-ms-justify-content: space-between;
/* Opera 12.1, Firefox 20+ */
flex-flow: row wrap;
justify-content: space-between;
}
.item {
margin: 10px;
width: 300px;
border: 1px solid red;
-webkit-box-flex: auto; /* iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1.0; /* Firefox 19- */
-webkit-flex: auto; /* Chrome */
-ms-flex: auto; /* IE10 */
flex: auto; /* Opera 12.1, Firefox 20+ */
}
