html - CSS float LI 具有不同的高度而没有间隙

Question

我正在尝试将列表 float 为 2 列。每个 li 都有不同的高度，我正试图在没有巨大间距的情况下实现这一点。

这和我得到的一样接近:

http://jsfiddle.net/kR94q/1/

HTML

注意:我没有像这样的 br 标签，只是为了让每个高度都不同。它代表内容。

<ul>
    <li><br /><br /><br /></li>
    <li><br /><br /></li>
    <li><br /><br /><br /><br /></li>
    <li><br /></li>
    <li><br /><br /><br /></li>
    <li><br /><br /></li>
</ul>

CSS

ul { width: 300px; margin: 0 auto; border: 1px solid black; list-style: none; padding: 0; }
ul li { width: 138px; margin: 1px 5px; border: 1px solid #d8d8d8; background-color: blue; float: left;}
ul li:nth-child(2n+1) { float: right; }

Answer 1

只用了两个 <ul>元素(我想你会受到当前正在呈现的 html 的限制)，你可以试试 column-count属性 (css3) 快速修复!

ul { 
    /* your existing css */
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
}

此外，我删除了 float 属性 :nth-child(2n+1)以这种方式处理时保持列对齐的属性。

在这里 fork 你的 fiddle : Fiddle