HTML& CSS：垂直流布局（柱状样式），如何实现？ [英] HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

问题描述

flowing元素的标准CSS / html定位是水平的（基于行）=> float：left ;.我需要做什么，像下面的例子中那样定位它们（​​柱状样式）。有什么CSS标签来设置这个地方吗？ （理想情况下，我不想设置网格，这应该发生同样的方式自动lilke它在浮动：左样式...）

The standard CSS/html positioning of "flowing" Elements is horizontal (row based) => float:left;. What do I need to do, to position them like in the example below (columnar style). Are there any CSS tags to set this somewhere? (Ideally I do not want to setup a grid, this should happen the same way automatically lilke it does in the float:left style...)

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

添加后：另外两个框：

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

最后，添加2个框后，它将如下所示：

Finally, after adding 2 more boxes it would look like this:

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

推荐答案

有 CSS3列< a>（对于您所谈到的效果，高度平衡部分是一个值得阅读的内容），它是受支持的在新的浏览器中，并且看起来像

There is CSS3 Columns (for the effect you talk about, the Height Balancing section is a good thing to read) which is supported in newer browsers and would look something like

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

并且支持 IE 10，FF和Chrome 。

或者，您可以使用 Masonry.js 在页面上获取列式效果（虽然这需要JS才能正常工作），并支持更多浏览器。

Or, you can use a tool like Masonry.js to get column like effects on a page (though this requires JS to work) and support more browsers.

这篇关于HTML&amp; CSS：垂直流布局（柱状样式），如何实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！