HTML & CSS : Vertical Flow Layout (columnar style), 如何实现？

Question

“流动”元素的标准 CSS/html 定位是水平的(基于行)=> float:left;。我需要做什么，才能像下面的示例(柱状样式)那样定位它们。是否有任何 CSS 标签可以在某处设置它？ (理想情况下，我不想设置网格，这应该像在 float:left 样式中一样自动发生...)

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

添加后:多了2个盒子:

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

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

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

Answer 1

有CSS3 Columns (对于您所说的效果，Height Balancing 部分值得阅读)它在较新的浏览器中受支持，看起来像

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

并且会支持IE 10, FF, and Chrome .

或者，您可以使用类似 Masonry.js 的工具在页面上获得类似列的效果(尽管这需要 JS 才能工作)并支持更多浏览器。