CSS：将div水平设置为2行
可以说我有
1 2 3 4 5 6 7 我想要的是通过这种简单的方式从左到右依次绘制两排像.single divs：第一个div将在左上角，第二个将在第一个下方，第三个将在第一个旁边，第4个将被放置在第3个以下，依此类推：
1 3 5 7 9 2 4 6 8
所有的div都有相同的大小。
我已经尝试过使用masonry.js，它的工作就像一个魅力，但它通过复杂的解决方案来实现如此简单的任务（简单的解决方案很重要）。
小提琴操场
有一个CSS属性就是这样做的
.cont { -webkit-columns: 5em; -moz-columns: 5em; columns: 5em; /* desired width of column */ }
我不认为你可以用结构的css做到这一点。
此结构应该可以帮助您获得所需的布局：
1 2 3 4
为了论证，假设您无法更改文档结构 – 您需要仅通过布局定义来完成此操作。
如果你知道你将拥有多少项，最简单的方法是使用内联块元素的CSS3列。 你的.hesles是内联块，而.cont使用’columns’属性设置5列，每列足以容纳你的单个，同时使用max-height将内联块强制每两个项目放入新列。 单体的最小尺寸足以阻止在同一条线上显示多个内联块。
你可以在这里看到这个效果作为一个jsfiddle： http ： //jsfiddle.net/mwjJG/25/ ：
.container { height: 240px; columns: 100px 5; -webkit-columns: 100px 5; -moz-columns: 100px 5; } .single { display: inline-block; height: 100px; width: 100px; }
请注意，除非您可以使用某种基于JS的shiv添加对columns属性的支持（CSS Pie可能能够执行此操作），否则这将无法在IE <10上运行。
我使用这个代码用CSS完成了这个：但它有点像hackish。
我将三个div（最后三个）设置为类’double’
.cont .single { background: blue; color: white; width: 100px; height: 100px; margin: 10px; float:left; display: inline-block; } .cont .double { background: blue; color: white; width: 100px; height: 100px; margin: 10px; display:inline-block; float:left; } div:nth-child(5) { clear:left; } .cont { height: 220px; background: red; }