如何在CSS中从上到下堆叠div

Question

我有一个列表如下：

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>

使用css float left，在html中看起来像这样：

1 2
3 4
5

是否可以将我的div设计为如下所示：

1 4
2 5
3

希望有人能提供帮助，谢谢！

Answer 1

@ funky;你可以使用css3 column-count属性来实现这个

的CSS：

div#multicolumn1 {
        -moz-column-count: 2;
        -moz-column-gap: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 50%;
        column-count: 3;
        column-gap: 50%;

}

点击此链接查看演示Div's in two columns

http://jsfiddle.net/sandeep/pMbtk/

注意：它在IE中不起作用。

Answer 2

您很可能需要创建两个div容器才能实现此功能。一个容器容纳1-3个，一个容器容纳4-5个。

Answer 3

如果您不需要支持ie，那么css columns可以直接进行支持。

Answer 4

这个AListApart article讨论了一系列不同的方法来支持这个写的CSS3。这里总结太长了所以我只会发布链接。