HTML& CSS:垂直流布局(柱状样式),如何实现? [英] HTML & CSS: Vertical Flow Layout (columnar style), how to implement?
问题描述
flowing元素的标准CSS / html定位是水平的(基于行)=> float:left
;.我需要做什么,像下面的例子中那样定位它们(柱状样式)。有什么CSS标签来设置这个地方吗? (理想情况下,我不想设置一个网格,这应该发生同样的方式自动lilke它在浮动:左样式...)
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...)
+---------------------------+
| DivBox1 |
| DivBox2 |
| DivBox3 |
+---------------------------+
添加之后:另外两个框:
After adding: 2 more boxes:
+----------------------------+
| DivBox1 DivBox4 |
| DivBox2 DivBox5 |
| DivBox3 |
+----------------------------+
最后,在添加2个框之后,它将如下所示:
Finally, after adding 2 more boxes it would look like this:
+-----------------------------+
| DivBox1 DivBox4 DivBox7 |
| DivBox2 DivBox5 |
| DivBox3 DivBox6 |
+-----------------------------+
推荐答案
有 CSS3列(对于您谈到的效果,高度平衡部分是新的浏览器支持的,并且看起来像
There is CSS3 Columns (for the effect you talk about, the Height Balancing section is a good thing to read) which is supported in newer browsers and would look something like
#box {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
并且支持 IE 10,FF和Chrome 。
或者,您可以使用 Masonry.js 在页面上获取列样效果(虽然这需要JS工作),并支持更多的浏览器。
Or, you can use a tool like Masonry.js to get column like effects on a page (though this requires JS to work) and support more browsers.
这篇关于HTML& CSS:垂直流布局(柱状样式),如何实现?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!