2

非常に単純な問題ですが、解決策が見つからないようです (純粋な css を使用して、Isotope などを避けたいと思います)。私は 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

実際には2つの列がないため、次のようなものが必要です。

<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 に答える