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

浏览器输出如下所示：

item 1 item 2 item 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 中不起作用。

Answer 2

对于这种类型的对齐，您需要在放置项目之前知道它们的数量，以便您知道要在第一列中放置多少个项目。

我会使用两个 div，左右浮动，并使用换行符将项目放在另一个 div 下方，切换到插入到第二个 div 中（例如 $('#seconddiv').append('Item 4');

或我如果您需要对每个项目进行某种处理，请将它们放在自己的 div 或 span 或单元格中，然后您可以设置它们的样式并单独单击它们。

Answer 3

CSS：

.tableDiv,
        .rowDiv
        {
            width:400px;
            float:left;
        }       
        .clDiv200
        {
            width:200px;
            float:left;
        }

HTML：

 <div class="tableDiv">
        <div class="rowDiv">
            <div class="clDiv200">Item 1</div>
            <div class="clDiv200">Item 4</div>          
        </div>
        <div class="rowDiv">
            <div class="clDiv200">Item 2</div>
            <div class="clDiv200">Item 5</div>          
        </div>
        <div class="rowDiv">
            <div class="clDiv200">Item 3</div>
            <div class="clDiv200">Item 6</div>          
        </div>
    </div>

这将在所有浏览器中正常工作..