ddよりdtの方が高い定義リスト(dl,dt,dd)を横並びさせる。

[追記 / 20100519 / まとめのcssを書いてなかったので追加した。
ddのfloatをleftからrightに変更したサンプルを追加してアップした。

dl,dt,ddは普段からよく使うタグで、横並びの表示もとくに構えることなく使ってきました。
しかし今まで使っていたcssではdtの高さがddを越える場合にちょっと都合が悪くなります。

なります、と書いたら知っていたかのようだけど、前々回の(画像のシャープ処理 / ハイパスとアンシャープマスクを比較)を書いてる時に思い出したというか気づいたわけです。

という事で、2010年のいまさらですがddよりdtが高くなっても崩れないように定義リストを横並びさせる方法を考えてみました。

確認用に作成したページ｜ddよりdtの方が高い定義リスト(dl,dt,dd)を横並びさせる。 / (画面内で開く)

横並びにさせる方法の概要

今回確認に使ったブラウザのバージョンは firefox3.6.3 / chrome4.1 / IE6~8 の5つ。

html側は以下の2パターンを用意。

1. ddよりdtが高いdl
2. dtよりddが高いdl

こんな感じ。
[html]dd > dt
<dl>
<dt>5-5-2010</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</dd>
<dt>5-5-2010</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>
</dd>
<dt>5-5-2010</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</dd>
</dl>

dt > dd
<dl>
<dt><img src="../../img/dummy_80.gif" width="80" height="80" alt="" /></dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</dd>
<dt><img src="../../img/dummy_80.gif" width="80" height="80" alt="" /></dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>
</dd>
<dt><img src="../../img/dummy_80.gif" width="80" height="80" alt="" /></dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</dd>
</dl>[/html]

css側は以下の2つの方法で横並びにさせた。

1. dtにfloatを指定し、dtのwidth分ddをmarginでずらす
2. dtとdd両方にfloatを指定

なおdtのfloatは全てwidth / clear:both;の二つとセットで設定してある。
こんな感じ。
[css]dt {
float:left;
width:80px;
clear:both;
}[/css]

各ブラウザのスクリーンショット

dtにfloat、ddはmargin

Firefox

chrome

IE8

IE7

IE6

dtとddにfloat

Firefox

chrome

IE8

IE7

IE6

各ブラウザでの表示結果をまとめると

アイコンの意味
/ 崩れない
/ 崩れた

各ブラウザでの表示結果

float指定要素	要素内の高さ	表示結果
dt	dtの方が高い
	ddの方が高い
dt,dd	dtの方が高い
	ddの方が高い

どちらのcssでもddが高い限りそれほど困らないようだけれど、dtの方が高くなった途端IE7以前と以降で表示結果が分かれた。

修正案 2つ

dtだけfloatさせるタイプのddにclearfixを追加してみる。
こんな感じのやつ。
[css]
dd:after {
content : ”;
display : block;
clear : both;
}
[/css]

(ヨモツネットさんを参考にclearfixを短くしました、Dwのスニペットも変更した。いまどき ? いまさら ? clear fix のコード | ヨモツネット)

もうひとつは
両方floatさせるタイプをベースにして、IE7以下だけddのfloatが無かったことにしてもらう。
こんな風に。
[css]
dd {
float:left;
width:380px;
padding:5px;

/float:none;
/margin-left:90px;
/width:auto;
}
[/css]

結果は確認用に作成したページから確認できるけど、一応両方とも崩れずに横並びになった。

ただし

dt – dd – ddなんて風にddが複数個続くと
ddのfloatを無かったことにしてもらう方で、ddが崩れちゃいました。
ddにclearfixを使った方では、IE7以下以外で一個目のddの高さがdtと同じになるのと、dtの下に隙間が出来た。

[追記 2 / 20100519]
ddのfloatがleftなので、dtの下に入り込むのであって
ddをfloat:rightにすれば解決するのでは??あれ?

今回の結論

dtにfloatを指定し、ddはmargin(-left)でずらす(dtのwidth分)
そしてddにclearfixを追加
(IE6～7 は hasLayout を true にする必要がないので/zoom:1は必要ないかも)。

ソース 1
[css]
dl {
width:480px;
}
dt {
clear:both;
float:left;
width:80px;
padding:5px;
border-top:1px solid dimgray;
}
dd {
margin-left:90px;
padding:5px;
border-top:1px solid LightSteelBlue;
}
/* IE7以下以外用 */
dd:after {
content:”;
display:block;
clear:both;
}
[/css]

ddの下の隙間をなくしたいなぁ
:afterのdisplay:blockの高さを0にするにはどうしたらいいものか。

[追記 2 / 20100519]
dtにfloat:left、ddにfloat:right
IE7以下用にddのfloatを/で解除。
こっちだとddの下に隙間が開かない。
[css]
dl {
width:480px;
}
dt {
float:left;
width:80px;
clear:both;
padding:5px;
border-top:1px solid dimgray;
}
dd {
float:right;
width:380px;
padding:5px;
border-top:1px solid LightSteelBlue;
/float:none;
/margin-left:90px;
/width:auto;
}
[/css]

float:rightで困る事あるかな?
困ることが無かったら2番目の方が綺麗に揃うからいいかも。