很简单的问题,但我似乎找不到解决方案(使用纯css,我想避免使用同位素之类的东西)。我有一个 2 列网格,div 显示为内联块,因此它们填充了.wrap
div,但问题是因为 div 具有可变高度,右侧列中的 div 下方有很大的间隙。
jsFiddle 演示:http: //jsfiddle.net/neal_fletcher/ntyLg/
HTML:
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
CSS:
.wrap {
position: absolute;
width: 500px;
height: auto;
}
.test {
width: 240px;
background-color: orange;
display: inline-block;
vertical-align: text-top;
margin-bottom: 5px;
}
.test:nth-child(odd) {
height: 200px;
}
.test:nth-child(even) {
height: 100px;
}
任何 CSS 唯一解决方案可以解决此类问题?任何建议将不胜感激!