这可能与列表有关吗？

Question

我想知道是否可以制作这样的列表：

或者我应该只使用div来完成同样的事情？

Answer 1

使用纯CSS（浮点数）可以获得如下列表：

LI1    LI2
LI3    LI4
LI5    LI6

但得到：

LI1    LI4
LI2    LI5
LI3    LI6

你需要使用带有CSS样式的javascript或2个列表。 （编辑：或作为cale_b提及的另一个答案，对于现代浏览器，您可以使用column-count）

我的第一个场景的CSS看起来像这样：

ul { width:400px; overflow:hidden; margin:0; padding:0; }
li { width:200px; float:left; margin:0; padding:0; }

根据自己的喜好调整宽度，边距和填充

Answer 2

不确定。取决于您是否需要首先在列中向下流动的项目，或者它是否可以从左向右流动。

如果从左到右都没问题，只需为li元素指定display：block，float：left和width：

li {
    display: block;  
    width: 150px;  
    float: left;  
}

如果您正在寻找它首先向下流动，然后向右流动，那么现代浏览器的一些技术涉及css3列数（仅适用于现代浏览器）：

ul {
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
} 

您的第三个选择是并排使用两个列表，

或者，如你所说，divs。

Answer 3

我想你可以，但我认为两个div有一个列表会更好。

Answer 4

列表很容易实现。你试过吗？

这只是CSS的问题。

在黑暗中刺伤：

ul { list-style: none; width: 400px; background: #eee; }
li { display: inline-block; float: left;margin: 10px; width: 158px; background: #eee;border: 1px solid #aaa;height: 100px; }​

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

Demo here