Question

相当简单的问题，但我似乎无法找到解决方案（使用纯css，我想避免像Isotope这样的事情）。我有一个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只能解决这样的问题吗？任何建议将不胜感激！

Answer 1

因为它实际上没有两列，所以你需要这样的东西：

<div class="wrap">
    <div class="test"></div>
    <div class="test"></div>
</div>
<div class="wrap">
    <div class="test"></div>
    <div class="test"></div>
</div>

Fiddle

Here is it working with different css

如果您愿意，也可以拥有.column课程：

<div class="wrap">
    <div class="column">
        <div class="test"></div>
        <div class="test"></div>
    </div>
    <div class="column">
        <div class="test"></div>
        <div class="test"></div>
    </div>
</div>

显示divs inline-block，分为2列，没有垂直间隙

1 个答案: