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


我有一个这样的列表:

<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

希望有人可以帮忙,谢谢!


1944
2017-09-01 09:28


起源

我觉得我想要更多信息。我的意思是......得到你想要的东西..你只需要以符合你想要的顺序的方式分配内容。就像你对数字所做的一样。当然,除非你想把一些事情考虑进去..但那会有用。 - Joonas


答案:


@ 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中不起作用。


13
2017-09-01 09:33



神奇!这很好用,我不需要添加另一个列或做任何黑客!谢谢! - Funky
乐于帮助 :) - sandeep
列数:2;我猜..顺便说一句Funky:D - Fanky


很可能你需要创建两个div容器才能工作。一个容器容纳1-3个,一个容器容纳4-5个容器。


0
2017-09-01 09:31





如果你不需要支持ie,那就有了 css列 那会很明显。


0
2017-09-01 09:34





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


0
2018-01-17 04:19