css - 如何在 CSS 中创建垂直元素列表？

Question

假设您有一个元素列表，并将它们放在 div 中。该列表是动态生成的，元素数量未知。

CSS:
div#container {
    width:500px;
}
div.item {
  width:150px;
  float:left;
}

HTML:
<div id="container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    .
    .
    .
</div>

浏览器输出如下:

元素 1 元素 2 元素 3
元素 4 元素 5 元素 6
. . . . . .

如何创建垂直列，例如:

元素 1 元素 4
元素 2 元素 5
元素 3 元素 6
. . .

Answer 1

@B七；你可以为此使用 css3 column-count 属性。

例如:

#multicolumn1 {
        -moz-column-count: 2;
        -moz-column-gap: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 50%;
        column-count: 3;
        column-gap: 50%;

}

查看此链接以获取演示 Div's in two columns

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

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