我有一个这样的列表:
<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)
http://jsfiddle.net/sandeep/pMbtk/
注意:它在IE中不起作用.