如何使浮动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可以输出两列,所以第一列包含"ABC D",第二列包含"EFG 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;
}

这是一个小提琴 - 虽然它尚未在任何版本的IE中得到支持.为了支持旧版浏览器,你可以使用jQuery解决方案,例如Columnizer jQuery Plugin,或者代替CSS3解决方案,

Answer 2

使用您的标记,CSS3解决方案将如下所示:

HTML

<div id="wrap">
    <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>
</div>

CSS:

.list_item {
    float: left;
    margin: 5px;
    padding: 5px;
    width: 200px;
    border: 1px solid gray;
}
#wrap {
    width:460px;
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}

使用此方法,无论每个内部的内容如何,​​您都可以获得列高度相等的额外好处<div>.

如果所有特定于供应商的前缀都不明显,浏览器对此的支持仅限于现代浏览器(我喜欢它的方式),因此它不是真正适合生产的代码(除非你喜欢前卫).

演示:jsfiddle.net/Marcel/tk2tS