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

Fun*_*nky 11 html css

我有一个这样的列表:

<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>
Run Code Online (Sandbox Code Playgroud)

使用css float left,它在html中看起来像这样:

1 2
3 4
5
Run Code Online (Sandbox Code Playgroud)

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

1 4
2 5
3
Run Code Online (Sandbox Code Playgroud)

希望有人能帮忙,谢谢!

san*_*eep 13

@ 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%;

}
Run Code Online (Sandbox Code Playgroud)

在两列中查看此链接以获取演示Div

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

注意:它在IE中不起作用.