横並びにした要素が複数行になった場合、最後の行の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をとるもしくは指定した行にクラスを付与することができないのかと考えたのですが、解決方法がみつかりませんでした。
ご存知の方、アドバイスをいただけますと幸いです。
「最後の行」とは具体的に何ですか? 常に div 要素が 6 つあって、最後から 3 つの div 要素のことですか? そうじゃなさそうな気がしますが、であれば「最後の行」定義を明確にしてください。
失礼いたしました。
要素が2行になった場合、2行目の要素すべてという意味です。
そうすると、今のソースでは、ブラウザの解像度が変わったり、画面のサイズを広げたりした時、「最後の行」の div 要素の数は変わってきませんか? 画面を広げたら全部の div 要素が 1 行目(最後の行?)になるということはありませんか?
見落としてました。親の div 要素の幅は 100px と指定してありましたね。それは固定でいいのでしょうか? 100px 固定でいいとして子の div 要素の数は 6 で固定ですか?
そうですね。とりあえず100pxにしてみました。子要素(.item)は30pxなので、3つならばないですね。。。.item:nth-child(3n)は.item:nth-child(2n)でした。子要素も自動で追加するものではないので固定ということになります。
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
回答4件
あなたの回答
tips
プレビュー