如何在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

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

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