HTML & CSS：垂直流布局（柱状样式），如何实现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9119347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML & CSS: Vertical Flow Layout (columnar style), how to implement?
提问by user1145216
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...)
“流动”元素的标准 CSS/html 定位是水平的（基于行）=> float:left;。我需要做什么，像下面的例子一样定位它们（柱状样式）。是否有任何 CSS 标签可以在某处设置它？（理想情况下我不想设置网格，这应该以相同的方式自动发生，就像它在 float:left 样式中所做的那样......）
+---------------------------+
| DivBox1 |
| DivBox2 |
| DivBox3 |
+---------------------------+
After adding: 2 more boxes:
添加后：2个盒子：
+----------------------------+
| DivBox1 DivBox4 |
| DivBox2 DivBox5 |
| DivBox3 |
+----------------------------+
Finally, after adding 2 more boxes it would look like this:
最后，再添加 2 个框后，它看起来像这样：
+-----------------------------+
| DivBox1 DivBox4 DivBox7 |
| DivBox2 DivBox5 |
| DivBox3 DivBox6 |
+-----------------------------+
采纳答案by LoveAndCoding
There is CSS3 Columns(for the effect you talk about, the Height Balancingsection is a good thing to read) which is supported in newer browsers and would look something like
有新的浏览器支持CSS3 Columns（对于你所说的效果，高度平衡部分是一个很好的阅读），它看起来像
#box {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
And would support IE 10, FF, and Chrome.
并且将支持IE 10、FF 和 Chrome。
Or, you can use a tool like Masonry.jsto get column like effects on a page (though this requires JS to work) and support more browsers.
或者，您可以使用Masonry.js 之类的工具在页面上获得类似列的效果（尽管这需要 JS 才能工作）并支持更多浏览器。
回答by cleong
Nowadays, the problem described can be solved in a more flexible manner using Flexbox layout. Requires the latest and greatest browser (IE 11+).
如今，所描述的问题可以使用 Flexbox 布局以更灵活的方式解决。需要最新最好的浏览器（IE 11+）。
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#column
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#column
回答by Mikael H?rsj?
Add a class to each of the divs and style it with something like:
为每个 div 添加一个类并使用以下内容对其进行样式设置：
.myDiv
{
width: 33%;
float: left;
}
