html - 如何使 float DIV 列表出现在列中，而不是行中

Question

我手头有一个 HTML 布局拼图。我有一个很大的按字母顺序排列的列表，由我的 PHP 应用程序生成，我需要将它输出到网页上。生成的标记如下所示:

<div class="list_item">A</div>
<div class="list_item">B</div>
<div class="list_item">C</div>
<div class="list_item">D</div>
<div class="list_item">E</div>
<div class="list_item">F</div>
<div class="list_item">G</div>
<div class="list_item">H</div>
...

样式表如下所示:

.list_item {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;

    width: 200px;
    float: left;
}

渲染结果:

如您所见，这不是很可读，我希望 DIV 以两列的形式输出，因此第一列将包含“A B C D”，第二列将包含“E F G H”。

有没有办法在不更改标记的情况下做到这一点？可以向偶数和奇数 div 添加不同的类，但由于 div 是在循环中输出的，因此无法以不同方式拆分它们。

查看演示:http://jsfiddle.net/KZcCM/

注意:我已经通过 PHP 将列表分成两部分解决了这个问题，但我想知道这里是否有 HTML/CSS 解决方案。

Answer 1

根据您需要支持的浏览器，您可以使用新的 CSS3 column-count 属性。

用一个简单的列表标记

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

使用这个 CSS:

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

Here is a fiddle - 虽然它还没有在任何版本的 IE 中得到支持。为了支持旧浏览器，有 jQuery 解决方案，例如 Columnizer jQuery Plugin ，您可以使用 CSS3 解决方案，或者代替 CSS3 解决方案，