- 例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。
- 例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。
- 例えばこちらの画像の場合、全部で4枚のレイヤーに分かれています。
こちらでは、eclucifer blog のエントリー 『 dt の方が高さがある場合の dt と dd の横並び 2 fixed レイアウト編 』 のサンプルを解説しています。 liquid レイアウトのサンプルは liquid レイアウト編 をご覧ください。
<div id="fixedLayout">
<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>
</div>
body {
text-align : center; /* margin: auto 非対応の IE 用 */
}
div#fixedLayout {
margin : auto; /* 中央寄せ */
position : relative; /* position: absolute の基点に指定 */
text-align : left;
width : 600px;
}
dl#sample2007031401 dt {
left : 0px; /* div#main の左端に指定 */
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; /* 高さの最小値(画像の高さ) */
}