motoyamayuki.com

Blog

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

2011.02.07

何がしたいかと言うと、

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

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

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

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

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

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

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

Contact

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

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