HTML&CSS:垂直流布局(柱状),如何实现?

前端之家收集整理的这篇文章主要介绍了HTML&CSS:垂直流布局(柱状),如何实现?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
“流动”元素的标准CSS / HTML定位是水平(基于行)=>浮动:左;.我需要做什么,定位他们就像下面的例子(柱状).有没有任何CSS标签设置在某个地方? (理想情况下,我不想设置一个网格,这应该发生在float中自动执行的相同方式:left style …)
+---------------------------+
|  DivBox1                  |
|  DivBox2                  |
|  DivBox3                  |
+---------------------------+

添加后:另外两个盒子:

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

最后再添加2个盒子后,看起来就像这样:

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

解决方法

CSS3 Columns(对于你谈论的效果,Height Balancing部分是一件好事),这在较新的浏览器中是支持的,看起来像
#Box {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

并将支持IE 10,FF,and Chrome.

或者,您可以使用像Masonry.js这样的工具来获取页面上的列效果(尽管这需要JS工作),并支持更多的浏览器.

猜你在找的CSS相关文章