動態高度浮動元素之間的不需要的垂直空間

我有一個區域位於兩列或並排的容器中的元素列表。如果所有元素都具有相同的高度，則元素將完美地浮動。不幸的是，當一個或幾個元素的高度不同時，不會發生同樣的情況，會出現白色的間隙，將其打破。在這裏可以看到一個工作示例（http://jsbin.com/juluxibuda/edit?html,css,output）。我已經解決了過去，不記得究竟是如何（用JS來保持所有元素之間的相同高度），我知道像砌體圖書館，但我想知道是否有一個CSS唯一的解決方案或什麼可以在這裏完成。動態高度浮動元素之間的不需要的垂直空間

HTML：

<div class="container"> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foods ds dsds sd sd<a href="#">as klasklas</a></div> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foo lkds kljds jkldas s</div> 
    <div class="foo">fas asasoods ds dsds sd sd<a href="#">as klasklas</a></div> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foods ds dsds sd sd<a href="#">as klasklas</a></div> 
    <div class="foo">foo</div> 
    <div class="foo">foo</div> 
    <div class="foo">foo lkds kljds jkldas s</div> 
    <div class="foo">fas asasoods ds dsds sd sd<a href="#">as klasklas</a></div> 
    </div>

CSS：

.container { 
    width: 100%; 
} 
.container .foo { 
    float: left; 
    width: 40%; 
    margin-right: 5%; 
    margin-bottom: 10px; 
    background: yellow; 
} 
.container .foo a { 
    display: block; 
}

來源

2015-09-04 punkbit

不......甚至沒有flexbox可以做到**和**保持相同的HTML結構。這就是爲什麼砌體如此受歡迎。 –

的確如此，它如此受歡迎的原因是：） – punkbit

一個解決方案到目前爲止，我已經找到了，這對於這種特殊情況下工作（但不是全部），是將元素放置在行中（一個容器）。容器元件高度將防止不需要的垂直間隙。

.row { 
    display: block; 
    float: left; 
    overflow: hidden; 
    width: 100%; 
    height: auto; 
}

來源

2015-09-04 09:33:01 punkbit

是的，用這些CSS創建類是正確的 –

動態高度浮動元素之間的不需要的垂直空間

回答

相關問題