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 Seven;您可以使用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中不起作用。

Answer 2

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

我会使用两个div，左右浮动，换行将项目放在另一个下面，切换到插入第二个div（例如$（'＃seconddiv'）。append（'Item 4'） ;

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

Answer 3

再次使用css3 > <+1> sandeep +1

您也可以查看此链接： Check this

Answer 4

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>

这适用于所有浏览器确定..

如何在CSS中创建垂直项目列表？

4 个答案: