CSSテクニックコミュの<dl>を用いたレイアウトについて質問

あるページの作成で上の図のレイアウトのようなものを
頻繁に使用しています。
simplebits.com というサイトを参考にして
<dl>タグをCSSで整形してこのレイアウトを実現していますが、
2つ目の<dd>の文章が長くなると左にフロートしている画像の
下に文字が回り込んでしまいます。
ページのいろんなところで共通で使うものなので、
<dt>内の画像の幅が変わっても大丈夫なように幅の指定などは特には
していません。

ページ共通で使うというポイントを押さえつつ、
<dd>内の文章が回り込まないように何かいい方法はありませんでしょうか？
よろしくお願いいたします。

↓以下はCSSの記述になります。
---
dl.box { margin: 0 0 5px 0; padding: 0; }
dl.box dt {
float: left;
display: block;
margin: 0 10px 0 0;
padding: 0;
}
dl.box dd { margin: 0 0 5px 0; padding: 0; line-height: 100%; }

--
ちなみにdl.boxをオートクリアするために以下のようなCSSも用いています。
/*autoclear*/
dl.halfbox:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
margin: 0;
padding: 0;
}

/* Hides from IE \*/
* html dl.box{ height: 1%; }

dl.box { display: block; }
/* End hide from IE */

コメント(13)

最初
全て
最新の40件

[1] mixiユーザー 07月27日 11:50

回答になってませんが、私もこういう場合皆さんどうしてるのか知りたい所です。
画像の幅が決まってたらddにmargin-leftを指定すればいけるんでしょうけど…
私はプログラムで書き出す場合とかはプログラムで画像サイズを取得して、インラインにmargin-leftを設定したりした事もありますが…

[2] mixiユーザー 07月27日 12:57

これは俺も悩みました…。
もしかしたら現状のCSSでは実現できないのかもしれませんね。
display: tableとかが使えるならできるのかもしれませんが…。

この場合は、個別に直接styleを指定してしまうのが
いいのかもしれませんね。
<dd style="margin-left: 130px;">
などのように。

[3] mixiユーザー 07月27日 13:05

やっぱり明示的にdtの幅とddの左マージンを指定しないと、
確実に意図したレイアウトを表示するのは難しそうですね。

dl {
clear:both;
}
dl dt {
clear:both;
float:left;
width:200px;
}
dl dd {
margin-left:200px;
}

[6] mixiユーザー 07月27日 16:15

こういう手段を使っていいのかわかりませんが、
回り込んでしまいそうものはそれを見越して
画像自体の下部に背景色と同じ色で余白を何ピクセルか
つけたして作ってしまうっていうのはだめですか？

[7] mixiユーザー 07月27日 16:16

苦肉の策ですが、こんなのはどうでしょうか…？
Firefoxとsafariでならば、
dtとdd要素両方にfloat:leftを入れ、
dtにのみclear:leftを追加すると同じような感じで表示されました。
そっちのほうがソースはきれいですね…。

IEで見ると、dt要素だけclearされ、
その下にあるはずのdd要素はclearされず
dd要素だけがずらっと並ぶ感じになっちゃいました。
動作としてはどっちが正しいんでしょうかね…。
（dt要素が出現した時点でclearされてるんだから、
Firefoxとかの動作のが正しいとは思いますが…）

いちおう下記のソースでは、
最後のdd要素にfloatをclearさせるクラスを適用し、
floatをclearしてます。
ただ、それだけのために空のdd要素を追加しなければならいので
HTML的にはよろしくないんでしょうが、
いちおう意図した表示にはなるかと思います。

CSS
--------------------------------------
dl dt{
background: #f66;
border: solid 1px #000;
float: left;
padding: 5px;
}

dl dd{
background: #66f;
border: solid 1px #000;
float: left;
padding: 5px;
}

dl dd.float-clear{
background: #f00;
clear: both;
float: none;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}

HTML
--------------------------------------
<dl>
<dt>DTDTDT</dt>
<dd>
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
</dd>
<dd class="float-clear"></dd>

<dt>DTDTDTDTDT</dt>
<dd>
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
</dd>
<dd class="float-clear"></dd>

<dt>DT</dt>
<dd>
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
</dd>
</dl>

[8] mixiユーザー 07月27日 16:55

<dd>の中身はブロック要素入れられますから、
<div>やをつかって、それにスタイルを当てるなどすれば、実現はできると思いますよ。

[9] mixiユーザー 07月28日 00:32

みなさんたくさんご意見ありがとうございます。
えどさんのは非常にありがたかったのですが、
2、３つと　<dd>が続くと　横にこうだーーっと並んじゃうので
できまへんでした。

ガク巡査さんの言うように<dd>内にブロック要素を挿入できるのであれば
共通　<dl> <dt> <dd> の指定の後、個々のはみ出す部分を
margin-left か何かを <div> や にあてがってやればいいかもしれませんね。
試してみます。

[10] mixiユーザー 07月29日 16:52

<dl><dt><dd>の基本となる指定をした後に、
<dd>にクラスをつけて<dt>に入れた画像プラスαのmargin-leftを
指定してあげればいけましたね。
これだと<dd>のみ個別指定をしてあげればいいので
CSSの記述は少なくて済みます。
IE6、FireforxではOKだったので使えると思います。

みなさんありがとうございました。

[11] mixiユーザー 07月29日 17:18

実際のHTMLをみないとなんともいえないところではありますが、dtの内容が画像ってのならば、そもそもそれをdl等でマークアップすること自体が適切ではない可能性が非常に高いと思います。

それならtableでやっちゃえばいいんじゃないですかね。

[12] mixiユーザー 07月29日 17:21

要するに、表じゃないものをtableでマークアップするのも、引用じゃないものをblockquoteでマークアップするのも、定義リストじゃないものをdlでマークアップするのもまったく同じことなので、定義リストでないものにdl等を使ってCSSで苦心するぐらいなら、tableを使った方が手っ取り早いと思います。

[13] mixiユーザー 07月29日 18:10

http://www.lucky-bag.com/archives/2005/10/dt_dd_same_line.html

こんな記事ありましたね。

ログインすると、みんなのコメントがもっと見れるよ