CSS浮动LI具有变化的高度没有间隙 [英] CSS float LI with varying heights without gap

问题描述

我想将列表浮动到2列。每个 li 有不同的高度，我试图使这个发生没有巨大的间隔空白。

I'm trying to float a list into 2 columns. Each li has a different height and I'm trying to make this happen without giant spacing gaps.

已尽可能接近：

http：// jsfiddle.net/kR94q/1/

HTML

注意：我没有像这样的 br 标签，只是它使每个高度不同。它代表内容。

NOTE: I dont have br tags like this, just did it to make each height different. It represents content.

<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; }

推荐答案

>< ul> 元素（我想你受限于HTML当前正在渲染），你可以尝试 column-count 属性（css3）快速修复！

Short of just using two <ul> elements (I imagine that you're constrained by however the html is currently being rendered), You could try out the column-count property (css3) for a quick fix!

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

此外，我删除了float属性：nth-

Also, I removed the float property :nth-child(2n+1) property to keep the columns lined up while approaching it this way.

在这里分叉你的小提琴：

Forked your fiddle here: Fiddle

这篇关于CSS浮动LI具有变化的高度没有间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！