Question

“流动”元素的标准CSS / html定位是水平的（基于行的）=＆gt; float:left ;.我需要做什么，像下面的例子中那样定位它们（柱状样式）。有什么CSS标签可以设置它吗？（理想情况下，我不想设置一个网格，这应该以相同的方式自动lilke它在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工作）并支持更多浏览器。

Answer 2

为每个div添加一个类，并使用类似的方式设置样式：

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

Answer 3

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

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

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

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

3 个答案: