“流动”元素的标准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; }
或者,您可以使用像Masonry.js这样的工具来获取页面上的列效果(尽管这需要JS工作),并支持更多的浏览器.