横並びさせた要素の最後の行全部のmargin-bottomを無効化したい

Question

横並びにした要素が複数行になった場合、最後の行のmargin-bottomは0にしたいです。

※リセットは省略します。

【HTML】

<div class="itemBox">

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

</div>

【css】

.itemBox{
width:100px;
text-align:center;
}

.item{
display:inline-block;
width:30px;
margin-right:10px;
margin-bottom:10px;
}



.item:nth-child(2n){
margin-right:0;
}

そこで最後の行を

【HTML】

<div class="itemBox">

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item mb0"></div>
<div class="item mb0"></div>
<div class="item mb0"></div>

</div>

このようにして

【CSS】

.mb0{
margin-bottom:0;
}

とすれば解決できたのですが、これだと微妙なので、cssもしくはjQuery等で、行を指定してmargin-bottomをとるもしくは指定した行にクラスを付与することができないのかと考えたのですが、解決方法がみつかりませんでした。
ご存知の方、アドバイスをいただけますと幸いです。

Comments

[退会済みユーザー]

「最後の行」とは具体的に何ですか？　常に div 要素が 6 つあって、最後から 3 つの div 要素のことですか？　そうじゃなさそうな気がしますが、であれば「最後の行」定義を明確にしてください。　

[gasuko]

失礼いたしました。
要素が２行になった場合、２行目の要素すべてという意味です。

[退会済みユーザー]

そうすると、今のソースでは、ブラウザの解像度が変わったり、画面のサイズを広げたりした時、「最後の行」の div 要素の数は変わってきませんか？　画面を広げたら全部の div 要素が 1 行目（最後の行？）になるということはありませんか？

[退会済みユーザー]

見落としてました。親の div 要素の幅は 100px と指定してありましたね。それは固定でいいのでしょうか？　100px 固定でいいとして子の div 要素の数は 6 で固定ですか？

[gasuko]

そうですね。とりあえず100pxにしてみました。子要素(.item)は30pxなので、３つならばないですね。。。.item:nth-child(3n)は.item:nth-child(2n)でした。子要素も自動で追加するものではないので固定ということになります。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

Answer 1

こうとか。（widthを可変にしても対応できる）

.itemBox {
	margin-right: -10px;
	margin-bottom: -10px;
	width: 110px; /* 100px + 10px 可変のときはcalc(100% + 10px)とか。 */
	text-align: center;
}
.item {
	display: inline-block;
	width: 30px;
	margin-right: 10px;
	margin-bottom: 10px;
}

Comments

[gasuko]

親要素にネガティブマージンですかなるほど！

Answer 2

こちらでいけると思います。
後ろから数えてn番目ってやつです。

.item:last-child,
.item:nth-last-child(2),
.item:nth-last-child(3) {
	margin-bottom: 0;
}

Comments

[gasuko]

last-childはよくつかいますが、nth-last-child(2)などの使い方はしりませんでした。勉強になりました。ありがとうございます！

Answer 3

親の div 要素の width, margin や、その中に入る子の div 要素の数、個々の子の div 要素の width, margin は全て固定ということでよければ、個人的には、質問者さんのやり方が一番分かりやすくてよいと思います。後で保守する人のためにも分かりやすい方がよさそうです。

でも、将来的には動的に変えることも考えているのでは？

もし動的にそれらがいろいろ変わるのであれば、自力でスクリプトを書いて対応するか、Bootstrap などのライブラリに使えるものがあればそれを使って対応するという話になると思いますが。

Answer 4

//ページ読み込み時に実行
$(document).ready(function() {
    //id='itemBox'のdiv要素の中の子div要素で、最後のモノのmargin-bottomを0pxにする
    $('div#itemBox div:last-child').css('margin-bottom', '0px');
    //行の中、という事であれば、この最後のdivの子要素となっているdivに対して適用になるので
    //$('div#itemBox div:last-child div').css('margin-bottom', '0px');
    //等のように、ネストさせていけばよい
});

jQueryで実装すると楽な気がします。

Comments

[gasuko]

jQueryがサクッとかけると便利かもしれませんね！ありがとうございます