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

问题描述

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

A
<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 {边距:5px；填充:5px；边框:1px纯灰色；宽度:200px；向左飘浮;}

渲染结果:

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

有没有办法在不改变标记的情况下做到这一点?可以向偶数和奇数 div 添加不同的类，但由于 div 是循环输出的，因此无法将它们分开.

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

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

解决方案

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

使用简单的列表标记

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

使用此 CSS:

ul {-moz 列数:2；-moz-column-gap: 20px;-webkit 列数:2；-webkit-column-gap: 20px;列数:2；列间距:20px；}

Here is a fiddle - 尽管目前任何版本的 IE 都不支持它.为了支持旧浏览器，有 jQuery 解决方案，例如 Columnizer jQuery Plugin，您可以可以使用以及或代替 CSS3 解决方案，

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>
...

The stylesheet looks like this:

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

    width: 200px;
    float: left;
}

Rendered result:

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 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.

See a demo: http://jsfiddle.net/KZcCM/

Note: I already solved it by splitting the list in two parts by PHP, but I want to know, if there is a HTML/CSS solution here.

解决方案

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

With a simple list mark up

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

Use this 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 - 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屋！