- Last Modified: 2008年11月30日 11:08
このページは、実践 Web Standards Design が第 1 刷・第 2 刷から第 3 刷となる際に、仕様自体の変更によって内容を修正した分について公開しています。
- 戻る:サポートページトップ
- 前: p.354
15 定義リストのdtとddを横並びさせる
floatを使った方法
dt {
float: left;
width: 5em;
}
dd {
margin-left: 5em;
}
dtをフロートさせてddを右に回り込ませます。 フロートさせるdt要素の幅を5emと指定し、同値をdd要素のマージンに指定します。
- floatで横並び
Column 非置換要素をフロートさせる場合
CSS2では、非置換要素をフロートさせる場合には、明示的な幅を持たなければいけない仕様になっていますが、CSS 2.1の仕様ではwidthの初期値であるautoの場合は内容に合わせた幅を計算(shrink-to-fit)するとなっています。
- URL 10.3.5 Floating, non-replaced elements
- http://www.w3.org/TR/CSS21/visudet.html#float-width
CSS 2.1の仕様を実装している最近のブラウザであれば、幅の指定をしなくても内容幅から計算して意図した通りに描画されるかもしれませんが、Mac版のIEなど、古いブラウザなどでは大幅に崩れてしまいます。 また、CSS 2.1は勧告候補の状態なので、素直にCSS2に沿って指定しておいたほうがよいかもしれません。
- 戻る:サポートページトップ
- 前: p.354