如何在CSS中从上到下堆叠div [英] How to stack divs from top to bottom in 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>

使用css float left，它看起来像html中的：

using css float left, it looks like this in html:

1 2
3 4
5

可以将我的div风格看起来像下面这样：

Is it possible to style my divs to look like the following:

1 4
2 5
3

希望有人可以帮助，谢谢！

Hope someone can help, thanks!

推荐答案

@ funky;您可以为此

@ funky; you can use css3 column-count property for this

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在两个栏目

check this link for a demo Div's in two colums

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

注意：在IE中无法使用。

这篇关于如何在CSS中从上到下堆叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！