不斷變化高度的CSS浮動LI沒有間隙

我想將一個列表浮動到2列。每個li有不同的高度，我試圖做到這一點沒有巨大的間距空白。不斷變化高度的CSS浮動LI沒有間隙

因爲我已經得到了這是接近：

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

來源

2014-02-15 user934902

短只是使用兩個<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)屬性來保持一字排開，而接近它這樣的列。

叉形您的提琴在這裏：Fiddle

來源

2014-02-26 18:10:05

這個答案似乎是最好的工作，感謝 – user934902

@Cameron赫德還存在一些問題，與你的小提琴。使用'columns'和浮動子元素是沒有意義的。我做了一個更新的小提琴：** http：//jsfiddle.net/kR94q/8/**。 – Netsurfer

可能使用柔性顯示器？

ul { width: 300px; 
    height: 250px; 
    margin: 0 auto; border: 1px solid black; list-style: none; padding: 0; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
}

fiddle

來源

2014-02-26 18:11:39 vals

在這種情況下，Flexbox似乎不是正確的選擇。主要有兩個原因。首先它會拉伸一個較低的盒子或填充空間（如下）。其次Firefox仍然不支持flex-wrap。 – Netsurfer

不斷變化高度的CSS浮動LI沒有間隙

回答

相關問題