floatでボックスを並べる時に左右ピッタリ、中は隙間を空けるcss
2011.02.07
何がしたいかと言うと、
こういうレイアウトを考えているとします。
背景がグレーのボックスにサムネイル画像が9枚並んでいますね。
floatでずら~っと並べるのが一般的かと思いますが、サムネイルのボックスにつけたclassに一括でmarginを指定すると
こういう感じになり、両端か片端に隙間が空いてしまいます。
隙間を空かないようにするには、端にくるボックスにのみ違う指定をしてあげればいいのですが、
「ループ処理で表示させている」、「ECサイトのシステムなどで個別にclass名をふることが出来ない」
という状況がちょいちょい訪れます。
そこで、サムネイルボックスに同じcss指定をしつつ、左右ピッタリに並べる方法を紹介します。 (さらに…)