我有一个这样的列表:
<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
希望有人可以帮忙,谢谢!
我有一个这样的列表:
<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
希望有人可以帮忙,谢谢!
@ 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分为两列
http://jsfiddle.net/sandeep/pMbtk/
注意: 它在IE中不起作用。
很可能你需要创建两个div容器才能工作。一个容器容纳1-3个,一个容器容纳4-5个容器。
如果你不需要支持ie,那就有了 css列 那会很明显。
这个 AListApart文章 讨论了一系列不同的方法来支持这个书面的CSS3。这里总结太久了所以我只会发布链接。