如何使浮动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解决方案，

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

Answer 3

我想不出纯CSS解决方案。

你说：

  

注意：我已经通过拆分解决了它   这个列表由PHP分两部分，但我   想知道，如果有HTML / CSS   解决方案。

所以，你拥有PHP的力量。在这种情况下，我会保留您已有的代码，但以不同的顺序输出元素：

请参阅：http://jsfiddle.net/xyLkz/

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

这有多容易取决于PHP的结构。

如果你有一个数组中的所有东西，那么在这种情况下，你只有两个循环（一个输出奇数组元素，其他偶数输出）。如果您需要n列的支持，那也不会有问题。

如果你在循环中“在运行中”构建输出，那么将会成为一个问题。在这种情况下，你可能不得不求助于将循环的每次迭代的输出缓冲到一个数组中，然后再进行相同的双循环过程。

Answer 4

@ silver

我在没有使用额外标记的情况下尝试使用它可能对您有用

http://jsfiddle.net/sandeep/GGwPq/1/

Answer 5

您不需要使用浮动物品，但也许对于物品所在的盒子，请尝试：

<div style="float: left; width: 200px;">
    <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>
<div style="float: left; width: 200px;">
    <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>

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

    width: 200px;
    /*float: left;*/
}

编辑：现在有2列：）