css - 行の 4 番目の div を選択し、余白を削除します

Question

4 つの div (200px 幅) と 3 つのスペース (20px) を配置する必要がある 860px 幅の領域があるとします。まったく4つのdivしかない場合は、使用できます

.div {width:200px; margin-right:20px}
.div:last-child {margin-right:20px;}

しかし、div はいくつあってもかまいませんが、for は 1 行しかないので、last-child は使用できません。ただし、1 行の幅は常に 860px です。

行の4番目のdivからmargin-rightを削除するには? または、この間隔を正しくする方法は?

score 6 · Accepted Answer

4 つごとの要素をターゲットにしている場合は、4つごとの要素が選択されるようにの式divを使用する必要があります。nth-of-type(4n+4)

div:nth-of-type(4n+4) {
    color: red;
}

注：ここでは一般的な要素セレクターを使用しているため、という名前のクラスを使用しているため、の.前にa を追加する必要がありますdiv.div

score 0 · Accepted Answer

@氏。Alien さんがベストアンサーを出しました。しかし、あなたの場合、このようにすることもできます（あなたの全幅のように）

<div id="main">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
</div>

#main > div最後のものにmargin-rightを与えると、margin もあり、

別の方法として、次のことができます

#main{margin-right: -10px; /*what margin you have given to #main > div */}

score 0 · Accepted Answer

これ

.div:nth-child(4){margin-right:0px;}

動作するはずです。

しかし、私はあなたが簡単にできると思います：

.div{margin-left:20px;}
.div:first-child{margin-left:0px;}

最初の要素は決して変わらないからです。

score 0 · Accepted Answer

したがって、必要なのはグリッドシステムです。nth-child を使用します。

div{margin-left:20px;}
div:nth-child(3n+1) {
margin-left: 0;
}

5 に答える 5