如何使浮动DIV列表出现在列而不是行 [英] How to make floating DIV list appear in columns, not rows

问题描述

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

I have a HTML layout puzzle on my hands. I have a large alphabetical list, generated by my PHP app, and I need to output it on a web page. The markup generated look like this:

<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的输出在两列，所以第一列将包含ABCD和第二个EFGH。

As you can see, this is not very readable, I would expect DIV's to be outputted in two columns, so the first columns would contain "A B C D" and the second one "E F G H".

Is有办法做到这一点，而不改变标记？这是可能的，添加不同的类，甚至和奇数的div，但由于divs在一个循环输出，theres是没有方式分裂他们不同。

Is there a way to do this, without changing the markup? It's possible, to add different class, to even and odd divs, but since divs are outputted in a loop, theres is no way split them differently.

http://jsfiddle.net/KZcCM/

推荐答案

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

Depending on which browsers you need to support, you can use the new CSS3 column-count property.

使用简单的列表标记

<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插件，您可以使用以及或替代CSS3解决方案，

Here is a fiddle - although it's not supported in any version of IE yet. To support older browsers there are jQuery solutions, such as Columnizer jQuery Plugin, that you can use as well as, or instead of the CSS3 solution,

这篇关于如何使浮动DIV列表出现在列而不是行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！