比方说，我有一个div将包含一系列元素（div的），这可能具有不同的高度，但他们都将具有相同的宽度。
我已经与同位素+砖石目前实现这一点，但因为有些浏览器已经支持CSS3多列，我希望对这些浏览器只是一个CSS的解决方案，回落至JavaScript来休息。
这是我一直在努力的CSS：
.div-of-boxes {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
然而，这使得要素的流动是自上而下左右。 我想，而不是左右自上而下流动。 这是想要我的例子：
1 2 3
4 5 6
7 8 9
但是，这是我所得到的：
1 4 7
2 5 8
3 6 9
在流动左右多列元素之前自上而下的问类似的东西，但我不是满意的答复，并且不会与不同高度的元素工作。 这是可能在所有与CSS列，或者是一个限制？
多列规范没有提供属性更改元素的列中的分配： http://www.w3.org/TR/css3-multicol/ 。 这样的属性似乎跟什么模块是专为（重建报纸或杂志文章的布局方式）。
其他纯CSS解决方案中没有将让你实现你正在寻找的效果。
如果你的布局总是要3列宽，你可以尝试使用nth您的内部div的选择。
您可以通过清除4项做到这一点。
#container { overflow: hidden; width: 440px; } #container div { background-color: gray; width: 110px; margin: 5px; float: left; } #container div:nth-child(4) { clear: both; }
<div id="container"> <div id="widget1">1</div> <div id="widget2">2</div> <div id="widget3">3</div> <div id="widget4">4</div> <div id="widget5">5</div> <div id="widget6">6</div> <div id="widget7">7</div> <div id="widget7">8</div> </div>
JS小提琴
您可以使用jQuery来重新安排列项。 在2周的cols情况下，这将是：
$('.your-columns-container .your-item:nth-child(even)').appendTo('.your-columns-container');
https://jsfiddle.net/hzvp7sgf/
而一些更复杂的3列：
$('.your-columns-container .your-item:nth-child(3n - 1)').addClass('container-col2');
$('.your-columns-container .your-item:nth-child(3n)').addClass('container-col3');
$('.container-col2').appendTo('.your-columns-container').removeClass('container-col2');
$('.container-col3').appendTo('.your-columns-container').removeClass('container-col3');
https://jsfiddle.net/d4LeLyu5/
