ddの内容が多い時のdtの背景を伸ばしたい

質問

dtとddをfloatで横並びにしています。
dtの背景色が途中で切れてしまいます。
例えば、

<dl>
<dt>場所
</dt>
<dd>あいうえお市かきくけ町<br />
　　さしすせ公園<br />
　　長文～～～～～～…
</dd>
</dl>

とした場合。dtには背景色を指定、ddの内容が複数行あってもdtの背景色が1行分だけで終わってしまいます。
ddの内容が収まっている高さまでdtの背景色を伸ばすにはどうしたら良いでしょうか？
よろしくお願いします。

回答No.1

abril · ベストアンサー

IEを度外視して良く、且つ定義が1つしかないなら、table-cellを使う事で簡単に実現できるのですが。
まあIEの件はともかく、質問文のサンプルからして定義リストの内容（dtとddのセット）は複数あるのですよね、おそらく。

であれば、ちょっとごまかしてますがこういう方法はいかがですか？
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<dl class="hoge">
<dt>場所</dt>
<dd>あいうえお市かきくけ町<br />
さしすせ公園<br />
長文～～～～～～…
</dd>

<dt>場所</dt>
<dd>短文～～～～～～…</dd>
</dl>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
dl.hoge {
zoom: 100%;
width: 200px;
margin: 0;
padding: 0;
background: #fcc;
}
dl.hoge:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: left;
}
dl.hoge dt,
dl.hoge dd {
float: left;
margin: 0;
padding: 0;
border-top: solid 5px #fff;
}
dl.hoge dt {
width: 50px;
}
dl.hoge dd {
width: 150px;
background: #ccf;
}
---------------------------------------------------------------------
dtの高さをddに合わせて成り行きにする、というのはtable-cellを使う以外の方法では実現できないんじゃないかと思います。
ですので、dtの背景色と見せかけてdtの方には背景色を指定せず、替わりにその色（#fcc）をdlの背景色として指定します。そうすると、ddの描画領域以外のところに#fccが背景色として描画されるので、見た目的にはdtの部分が#fccで塗られている様になります。
ただし、dtとddのセットが複数あると考えた場合、（テーブルの行の様に）1セット毎に何らかの区切りが表示されているのが普通かと思います。通常であればmargin-bottomで余白を作りたいところですが、dtとddの高さが実は違っていることがそれによってわかってしまいます。
なので、これもごまかしなんですが、余白を作る替わりにdtとddにベースの背景色と同じ（この場合は背景色が白#fffであると仮定しています）色のボーダーを引いてやる事で、いかにも余白が出来ているかの様に見せます。ただ、ボーダーもdtとddの下に引いてしまうと余白と同じで高さの違いがわかってしまいますので、上に引きます。上の描画開始位置は、下と違ってセットのdtとddは必ず同じになるからです。
これで、見た目的にはdtには#fcc、ddには#ccfが塗られ1セット毎に5pxの余白が出来ている、という状態になります。

不具合や意図したものと違うところがある様であれば具体的に補足して下さい。

お礼

お返事遅くなってしまってごめんなさい。

＞dtの背景色と見せかけてdtの方には背景色を指定せず、替わりにその色（#fcc）をdlの背景色として指定します。
こちらを参考にさせて頂きました。

＞ただ、ボーダーもdtとddの下に引いてしまうと余白と同じで高さの違いがわかってしまいますので、上に引きます。
こちらも使わせて頂きました。どうもありがとうございました。

回答No.2

mat-21

「dt」と「dd」をfloatで横並びにすると言うことは、予めそれぞれの横サイズが指定されていないと表示が崩れる場合がありますので、例えばで回答させていただきますね。

ここで問題と思われるのは、この場合「dt」と「dd」はブロック要素になるので、それぞれに「height」指定しないと、横並びでも頭は面がそろいますが、高さはバラバラなので、「dt」の背景の色と「dd」の背景の色を見れば、高さが異なるので、当然、高さが揃わない事になります。

では、「dl」に「dt」と同じ背景色を付ければ、論理的に大丈夫のように感じますが、「dt」と「dd」がfloatしてるので、「dl」に背景色を付けたにも関わらず、背景色がつかない現象がおきます。たぶん^_^;
ですので、「dt」と「dd」の後に「dl」内でfloatを解除する必要があります。ただ、「dl」内には「dt」と「dd」以外は使えないので、「dl」に「dt」と同じ背景色を付けるのではなく、「dl」をくくる親の「div」を設け、その「div」に「dt」と同じ背景色を付けて、「div」内の「dl」ブロック後に「<br>」にfloatをクリアさせれば、見た目は問題なく表示されると思うのですが。。。
実際やってみていないので、嘘言ってましたらごめんなさいm(_ _)m

▼CSS記述
.clearBoth {
clear:both;
}
.addlist {
background-color:#FF0000; /*dtに付けたい背景色*/
width:400px;
}
.addlist dt {
width:100px;
float:left;
}
.addlist dd {
background-color:#FF00FF;
width:300px;
float:left;
}

▼HTML
<div class="addlist">
<dl>
<dt>場所</dt>
<dd>あいうえお市かきくけこ町<br />さしすせ公園<br />長文＊＊＊＊＊＊</dd>
</dl>
<br class="clearBoth" />
</div>

てな感じですが。。。。。