浮动div左侧创建多列布局?

时间:2011-10-09 09:35:18

标签: html css

假设我想在多列布局中放置一个随机数量的相同大小的div,如下所示:

DIV 1   DIV 4   DIV 7...
DIV 2   DIV 5
DIV 3   DIV 6

我如何只使用CSS,只使用div(没有列容器div)?

2 个答案:

答案 0 :(得分:0)

您可能需要某种父级,然后使用css3 列数

<style>
body {
    width: 300px;
    height: 100px;
    border: 1px solid red;

    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
div {
    width: 48px;
    height: 48px;
    border: 1px solid black;
}
</style>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>

答案 1 :(得分:0)

CSS网格布局模块专为此用例设计:http://dev.w3.org/csswg/css3-grid-align/

这是一个演示:http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm。它得不到很好的支持,IE10是我所知道的唯一支持它的浏览器。