dt の方が高さがある場合の dt と dd の横並び 1 liquid レイアウト編

こちらでは、eclucifer blog のエントリー『 dt の方が高さがある場合の dt と dd の横並び 1 liquid レイアウト編』のサンプルを解説しています。 fixed レイアウトのサンプルは fixed レイアウト編をご覧ください。

CSS HappyLife さんのエントリー『 dt の方が高さが有る時の dt dd を横並び』の方法だと、dd 幅を可変にしたい場合に知識不足により上手くいかなかったため、試行錯誤の末至った苦肉の策です。使いまわしが利かないあたりどうにも使えない方法なのですけれど、もっとスマートで正攻法なやり方をご存知の方がいらっしゃいましたらご教示いただけると嬉しいです。

dt の方が高さがある場合の dt と dd の横並び 1 liquid レイアウト編
dt の方が高さがある場合の dt と dd の横並び 2 fixed レイアウト編

表示サンプル

: 例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。
: 例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。
: 例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。

HTML

<dl id="sample2007031401"> <dt><img src="./image/2007031401.gif" width="200" height="150" alt="サンプル画像" /></dt> <dd>例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。</dd> <dt><img src="./image/2007031401.gif" width="200" height="150" alt="サンプル画像" /></dt> <dd>例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。</dd> <dt><img src="./image/2007031401.gif" width="200" height="150" alt="サンプル画像" /></dt> <dd class="last">例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。</dd> </dl>

CSS

body { margin : 1.8em; } dl#sample2007031401 dt { left : 1.8em; /* body の margin と同値 */ position : absolute; /* 絶対配置指定 */ width : 200px; } dl#sample2007031401 dd { margin-left : 216px; height : 170px; /* min-height 非対応の IE 用 */ } body > dl#sample2007031401 dd { min-height : 170px; /* 高さの最小値(画像の高さ＋行間？値) */ } dl#sample2007031401 dd.last { /* 最後の dd には行間？は必要ないため */ height : 150px; /* min-height 非対応の IE 用 */ } body > dl#sample2007031401 dd.last { min-height : 150px; /* 高さの最小値(画像の高さ) */ }

position を使用した dt と dd の横並び方法は、Lucky bag::blog さんの『 dt と dd を横並びのサンプルその1 』を参考にしました。