HTML＆CSS：垂直流布局（柱状样式），如何实现？

“流动”元素的标准CSS/html定位是水平的（基于行）=>float:left;。我需要做些什么来定位它们，如下面的示例（柱状样式）。有没有任何CSS标签来设置这个地方？（理想情况下，我不希望建立一个网格，这应该自动发生同样的方式lilke它在浮动的功能：left样式...）HTML＆CSS：垂直流布局（柱状样式），如何实现？

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

加入后：2个箱子：

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

最后，加入2个箱子后，是这样的：

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

来源

2012-02-02 user1145216

你需要什么样的浏览器支持？ – Ktash 2012-02-02 20:20:04

理想情况下，它应该基于标准。它确定，如果它只基于像css3和html5（因此所有兼容的浏览器）的新标准。但如果以前的浏览器支持这一点，它也会很好，但这不是必需的） – user1145216 2012-02-02 20:21:51

有CSS3 Columns（你说说效果，Height Balancing部分是读个好东西），这是在新的浏览器支持，会看起来像

并支持IE 10, FF, and Chrome。

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

来源

2012-02-02 20:31:03 Ktash

对于这种效果，Masonry.js有一些选择吗？（通过简单的搜索，我找不到这样的） – Touko 2014-05-19 11:26:40

@Touko不，砌体没有特别针对这种布局的选项，它只是最受欢迎的列库。但是，还有很多其他库更具体地针对这个特定的东西。我不能推荐一个，因为我从来没有用过，但是快速搜索JS列应该会产生很多选项。 – Ktash 2014-05-19 14:58:52

也列宽http://www.w3schools.com/cssref/css3_pr_column-width.asp – Indy9000 2015-03-11 17:28:41

添加类各的div和风格它的东西，如：

.myDiv 
{ 
    width: 33%; 
    float: left; 
}

来源

2012-02-02 20:20:24

现在，当我读得更加正确时，我发现我简化了一下。你需要做更多。你可以尝试使用上面的样式添加容器div，并将三个div分别放在左边，但我没有添加标记的解决方案。 – 2012-02-02 20:25:16

如今，使用Flexbox布局可以更灵活地解决所描述的问题。需要最新最好的浏览器（IE 11+）。

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#column

http://philipwalton.github.io/solved-by-flexbox/

来源

2014-08-31 02:23:42 cleong

HTML＆CSS：垂直流布局（柱状样式），如何实现？

回答

相关问题