2008.07.15

数個おきのブロックにclearを指定して横並びをclearする方法

floatを数個おきにclearするサンプル画像

商品を並べたり、フォトギャラリーを作る際に、次のようにコードを書くと思います。

HTMLコード

 
<div class="box-row">
    <dl class="box">
        <dt><img src="orange.jpg" width="120" height="100" /></dt>
        <dd>商品：オレンジ1</dd>
        <dd>数量：3kg</dd>
        <dd>価格：\1,575（税込）</dd>
    </dl>
    <dl class="box">
        <dt><img src="orange.jpg" width="120" height="100" /></dt>
        <dd>商品：オレンジ2</dd>
        <dd>数量：3kg</dd>
        <dd>価格：\1,575（税込）</dd>
    </dl>
</div>
<div class="box-row">
    <dl class="box">
        <dt><img src="orange.jpg" width="120" height="100" /></dt>
        <dd>商品：オレンジ3</dd>
        <dd>数量：3kg</dd>
        <dd>価格：\1,575（税込）</dd>
    </dl>
    <dl class="box">
        <dt><img src="orange.jpg" width="120" height="100" /></dt>
        <dd>商品：オレンジ4</dd>
        <dd>数量：3kg</dd>
        <dd>価格：\1,575（税込）</dd>
    </dl>
</div>

横一列ごとにdiv.box-rowで囲っている理由は、横一列の高さを揃えるためです。例えば、オレンジ1の内容が多くオレンジ2の内容が少ない場合、オレンジ1の高さに合わせて次の行が決まります。
div.box-rowが無かったら、それぞれのブロックの内容量が違った場合、レイアウトが崩れてしまいます。

ただ、div.box-rowで囲うと更新するときに不便なんです。例えば、オレンジ1の次にリンゴ1というブロックを追加したいとなると、オレンジ1の下にリンゴ1を追加 → オレンジ2を次のdiv.box-rowの中に移動・・・という風に下にずらしていかないとダメなんです。数が多いほど、時間が掛かりますよね。

そこでdiv.box-rowを使わない方法で実現させるCSSがあります。

HTMLコード

 
<dl class="box">
    <dt><img src="orange.jpg" width="120" height="100" /></dt>
    <dd>商品：オレンジ1</dd>
    <dd>数量：3kg</dd>
    <dd>価格：\1,575（税込）</dd>
</dl>
<dl class="box">
    <dt><img src="orange.jpg" width="120" height="100" /></dt>
    <dd>商品：オレンジ2</dd>
    <dd>数量：3kg</dd>
    <dd>価格：\1,575（税込）</dd>
</dl>
<dl class="box">
    <dt><img src="orange.jpg" width="120" height="100" /></dt>
    <dd>商品：オレンジ3</dd>
    <dd>数量：3kg</dd>
    <dd>価格：\1,575（税込）</dd>
</dl>
<dl class="box">
    <dt><img src="orange.jpg" width="120" height="100" /></dt>
    <dd>商品：オレンジ4</dd>
    <dd>数量：3kg</dd>
    <dd>価格：\1,575（税込）</dd>
</dl>

CSSコード

 
dl.box {
    float: left;
    margin: 0 10px 10px 0;
    padding: 5px 0;
    border: 1px solid #CCCCCC;
    width: 130px;
    background: #EEEEEE;
}
 
.box dt,
.box dd {
    margin: 0;
    padding: 0 5px;
    font-size: 0.8em;
    line-height: 1.3;
}
 
dl.box:nth-child(4n+1) {
  clear: left;
}

→指定した数個おきにclearを適用させたサンプル

nth-child()疑似クラスをつかって何個目にclearを適用させるか指定します。3個目に適用させるならnth-child(3n+1)になります。
ただ、問題があってnth-child()疑似クラスはCSS3で定義されているもので、今の主要ブラウザ（IE・FireFoxなど）ではサポートされていません。したがってこの方法は、まだ使わない方がいいです。