motoyamayuki.com

Blog

floatでボックスを並べる時に左右ピッタリ、中は隙間を空けるcss

2011.02.07

何がしたいかと言うと、

こういうレイアウトを考えているとします。

背景がグレーのボックスにサムネイル画像が9枚並んでいますね。

floatでずら~っと並べるのが一般的かと思いますが、サムネイルのボックスにつけたclassに一括でmarginを指定すると

こういう感じになり、両端か片端に隙間が空いてしまいます

隙間を空かないようにするには、端にくるボックスにのみ違う指定をしてあげればいいのですが、
「ループ処理で表示させている」、「ECサイトのシステムなどで個別にclass名をふることが出来ない」
という状況がちょいちょい訪れます。

そこで、サムネイルボックスに同じcss指定をしつつ、左右ピッタリに並べる方法を紹介します。

まずhtmlから。

<div id="container">
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</div>

次にcss。

div#container {
width: 640px;
overflow: hidden;
}
div.outer {
width: 660px;
}
div.outer:after {
display: block;
clear: both;
content: "";
}
div.inner {
width: 200px;
height: 100px;
margin: 10px 20px 10px 0;
float: left;
}

これでhtmlのclass指定をいちいち変更せずにぴったり配置が実現できます。
簡単に解説を。

サムネイルボックス(class名inner)にはmargin指定を左だけ0にします。
それを3つ並べるので、サムネイルボックスが入っている親ボックス(class名outer)はwidthが660pxになります。
しかし、さらにその親ボックス(ID名container)のwidthは640pxなので、20pxはみ出ます。
そのはみ出た部分を表示させないためにoverflow:hiddenを指定します。
このままでは、サムネイルの次に来る要素が親ボックスと被ってしまいます。
そこで擬似要素を入れてfloat要素をクリアします。

こういう細かい部分が、往々にしてデザインを左右するので気を配りたいですね。

  • このブログをはてなブックマークに追加

Contact

お仕事のご依頼、面白いことのお誘い、一度お話してみたい!などなど、完山祐毅へのお問い合わせは、下記のフォームよりお願いします。送信後、 info@motoyamayuki.com より確認のメールが届きます。
※多くのご相談・ご依頼をいただき誠にありがとうございます。当面のスケジュールが決まっているため、直近での作業が必要なご依頼についてはお請けいたしかねます。大変恐縮ではありますが、あらかじめご了承くださいませ。

お問い合わせフォーム
お名前
メールアドレス
メールアドレス(確認用)
内容
Treble