1

クラスを共有するセレクターのボックスがあります。widgetContainer次の行にドロップする前に、1行に3divを保持できます。私はnth-child(3n+0)3番目のdivごとに右側のマージンを取り除くために使用しており、最初の2つにさらに10pxのマージンを追加できます（これにより、divがコンテナに正確に収まります）。

しかし、私が知りたいのは、をターゲットにしnth-child(3n+0)てマージンを削除する方法があるかどうかですが、例として、:not:nth-child(3n+0)その上に10pxのマージンを追加できるようにする方法がありますか？これにより、CSSを同じに保つことができ、疑似セレクターがサポートされていない場合は、パフォーマンスが低下します。

私のコードをお見せしましょう：

HTML

<div class="widgetContainer">
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
</div>

CSS

.widgetBox {
    width: 300px;
    height: auto;
    float: left;
    margin: 30px 20px 10px 0;
    border: 3px solid #e4e4e4;
}
.widgetBox:nth-child(3n+0) {
    margin: 30px 0 10px 0;
}

JSFiddleについて

CSSでできることwidgetBoxは、マージンをに設定することです30px 30px 10px 0が、これはサポートされていないブラウザーでは機能しませんnth-child。マージンが3番目のdivから削除されていないため、行ごとに2divが強制されます。

さらに詳しい説明が必要な場合はお知らせください。

注-私は実際にはこれにjQueryを使用したくないのですが、必要な場合はお知らせください。間違いなく使用を検討します。

4

1 に答える 1

3

セレクターはありません。さらに2つのスタイルを追加するだけです。

.widgetBox:nth-child(3n+1) {
    margin: 30px 30px 10px 0;
}

.widgetBox:nth-child(3n+2) {
    margin: 30px 30px 10px 0;
}
于 2012-04-05T15:20:25.643 に答える