2

很简单的问题,但我似乎找不到解决方案(使用纯css,我想避免使用同位素之类的东西)。我有一个 2 列网格,div 显示为内联块,因此它们填充了.wrapdiv,但问题是因为 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 唯一解决方案可以解决此类问题?任何建议将不胜感激!

4

1 回答 1

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>

小提琴

这是它使用不同的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>
于 2013-10-03T23:18:25.093 回答