HTML和CSS:垂直流布局(柱状样式),如何实现？

Question

"流动"元素的标准CSS/html定位是水平的(基于行的)=> float:left;. 我需要做什么,像下面的例子中那样定位它们(​​柱状样式).有什么CSS标签可以设置它吗？(理想情况下,我不想设置一个网格,这应该以相同的方式自动lilke它在浮动:左样式...)

+---------------------------+
|  DivBox1                  |
|  DivBox2                  |
|  DivBox3                  |
+---------------------------+

添加:2个以上的盒子:

+----------------------------+
|  DivBox1  DivBox4          |
|  DivBox2  DivBox5          |
|  DivBox3                   |
+----------------------------+

最后,再添加2个框后,它看起来像这样:

+-----------------------------+
|  DivBox1  DivBox4  DivBox7  |
|  DivBox2  DivBox5           |
|  DivBox3  DivBox6           |
+-----------------------------+

Answer 1

有CSS3列(为了你所说的效果,高度平衡部分是一个好东西,阅读),在较新的浏览器中支持,看起来像

#box {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

并支持IE 10,FF和Chrome.

或者,您可以使用像Masonry.js这样的工具在页面上获得类似列的效果(虽然这需要JS工作)并支持更多浏览器.