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

こんな感じ。

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

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

なおdtのfloatは全てwidth / clear:both;の二つとセットで設定してある。
こんな感じ。

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

dtにfloat、ddはmargin

Firefox
dtにfloat、ddはmargin / Firefox

chrome
dtにfloat、ddはmargin / chrome

IE8
dtにfloat、ddはmargin / IE8

IE7
dtにfloat、ddはmargin / IE7

IE6
dtにfloat、ddはmargin / IE6

dtとddにfloat

Firefox
dtとddにfloat / Firefox

chrome
dtとddにfloat / chrome

IE8
dtとddにfloat / IE8

IE7
dtとddにfloat / IE7

IE6
dtとddにfloat / IE6

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

アイコンの意味
Google Chrome OKFirefox OKIE8 OKIE7 OKIE6 OK / 崩れない
Google Chrome NGFirefox NGIE8 NGIE7 NGIE6 NG / 崩れた

各ブラウザでの表示結果
float指定要素要素内の高さ表示結果
dtdtの方が高いGoogle Chrome NGFirefox NGIE8 NGIE7 OKIE6
ddの方が高いGoogle Chrome OKFirefox OKIE8 OKIE7 OKIE6
dt,dddtの方が高いGoogle Chrome OKFirefox OKIE8 OKIE7 NGIE6 NG
ddの方が高いGoogle Chrome OKFirefox OKIE8 OKIE7 OKIE6 OK

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

修正案 2つ

dtだけfloatさせるタイプのddにclearfixを追加してみる。
こんな感じのやつ。

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

もうひとつは
両方floatさせるタイプをベースにして、IE7以下だけddのfloatが無かったことにしてもらう。
こんな風に。

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

ただし

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

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

[追記 2 / 20100519]
dtにfloat:left、ddにfloat:right
IE7以下用にddのfloatを/で解除。
こっちだとddの下に隙間が開かない。

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


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.