floatで横幅きっちりに写真等の要素を並べる

2009年09月08日（火）

XHTML/CSS/Javascript

WebサイトやECサイトにて、商品写真を横幅きっちりに並べたい場合があるかとおもいます。その時リスト系の要素をfloatを用いて横に並べて、商品間を左右marginで調節するなどで再現しますが横きっちりに並べる場合一番右端、あるいは左端のアイテムがしたにずれ込みカラム落ちする場合があります。

原因は親要素の横幅と、floatしている子要素の横幅+marginが親要素の横幅をこえるためです。

横幅きっちりに並べたい

その問題が発生しないよう再現しているサイトの中には、一番右端に来る要素に対してclass属性でmarginを0にしたり調整したりする場合がありますが、これにはデメリットがあります。

要素の追加削除によって、いちいちclass属性の位置を調節しなければならない。
ECシステム、CMS実装時、一定のループ時にclass属性を追加するカスタマイズが必要。
上記の処理がECシステム、CMSによってはそれが再現できない可能性がある。
上記の処理はデザイナー･マークアップエンジニアだけでは解決しない場合もある。

それを踏まえて、もっとシンプルで別視点から見たアプローチを提示します。

floatのリストを横幅きっちり並べるサンプル

HTML

<div id="main">
<ul>
<li>[中身]</li>
<li>[中身]</li>
<li>[中身]</li>
<li>[中身]</li>
<li>[中身]</li>
</ul>
</div>

CSS

div#main{
 width: 830px; /*※1 */
 overflow: hidden; /*※2 */
}

ul{
 list-style: none;
 width: 840px; /*※3 */
}

ul:after{
 display: block;
 clear: both;
 content: "";
}

ul li{
 float: left;
 width: 200px; /*※4 */
 margin-right: 10px; /*※4 */
}