0

一連のオファーを表示するために、グリッドのようなレイアウトを含むレイアウトに取り組んでいます。これが私が達成しようとしていることです：

目的

私の問題は、このグリッド内でガターを均一に洗い流すことができないように見えることです。これが私がこれまでに持っているものです：

現在の結果

HTML:

<div id="main">
    <div><img src="images/welcomeBanner.jpg"></div>
    <div class="offers">
        <img class="offer" src="images/offer1.jpg">
        <img class="offer" src="images/offer2.jpg">
        <img class="offer" src="images/offerX.jpg">
        <img class="offer" src="images/offerX.jpg">
        <img class="offer" src="images/offerX.jpg">
        <img class="offer" src="images/offerX.jpg">
    </div>
</div>

CSS:

div#content div#main div.offers img.offer{ padding-top:20px; padding-right: 20px; }

padding-right:20px;これらのオファー項目 ( ) のそれぞれで使用していimg.offerます。これらのオファーはすべてインラインであるため、各行をこのメイン列の右側と同じ高さに揃えることができないようです (大きなバナーの右側と手を合わせます)。

純粋な CSS でこれを実現したいと思っていますが、実現しない可能性があることに気づきました。私は試してみ:nth-child(3n)ますが、IE のサポートがないことは私にとって大きな問題です。

サーバー側のプロセッサを使用してグリッド アイテムの数を計算する手段がありません。この計算を行うためにjavascriptまたはjqueryを使用したいだけかもしれませんが、他の提案があるかどうかを確認したかったのです。

TLDR: 均等なガターと全幅のグリッドを取得するのを手伝ってください。

みんな、ありがとう！

4

2 に答える 2

1

コンテナの幅はわかりませんが、これが役立つ場合があります。

.offer {
    /* some stuff */
    padding-right: 25px; /* You have to find a good value */
}
.offer:nth-child(3n) {
    padding-right: 0;
}

使用したくない場合nth-child()は、代わりに 3 番目の画像 (.offer) ごとに追加のクラスを与えることができます。

于 2013-02-01T21:32:39.753 に答える
0

img.offer:nth-child(3n) { padding-right: 0; }これを使用して、3番目の画像ごとに右側のパディングを取り除くことができます

于 2013-02-01T21:31:05.157 に答える