<分区>
html - 动态高度 float 元素之间不需要的垂直空间
我有一个元素列表，这些元素位于一个容器中，分为两列或并排。如果所有元素都具有相同的高度，则元素会完美地 float 。不幸的是，当一个或几个元素的高度不同时，不会发生同样的情况，出现白色间隙，打破它。可以在此处看到一个工作示例 ( http://jsbin.com/juluxibuda/edit?html,css,output )。 我过去已经解决过这个问题，不记得具体是如何(使用 JS 在所有元素之间保持相同的高度等)并且我知道像 Masonry 这样的库，但我想知道是否有仅 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;
}
最佳答案
目前我找到的一种适用于这种特定情况(但不是全部)的解决方案是将元素放置在行(容器)中。容器元素高度将防止不需要的垂直间隙。
.row {
display: block;
float: left;
overflow: hidden;
width: 100%;
height: auto;
}
关于html - 动态高度 float 元素之间不需要的垂直空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32394576/