html - dt dd 背景の配置

Question

レンダリングしたい

<dl>
    <dt>word</dt><dd>meaning (long text with many lines)</dd>
    <dt>word</dt><dd>meaning (long text with many lines)</dd>
</dl>

dt と dd の 2 つの異なる背景色

dt {
 float:left;
 width:10%;
 background:green;
}
dd {
 float:left;
 width:90%;
 background:transparent;
}

私の dt コンテンツテキストは非常に短いため、dt コンテンツは 1 行で表示されます。dd コンテンツのテキストが非常に長いため、dd コンテンツが何行にもわたって表示されます。

2 つの背景を同じ行数 (テーブルのように) でレンダリングするにはどうすればよいですか?

ありがとう

score 0 · Accepted Answer

float を使用する必要はありません。それを取り除きます。代わりに、1 つの dl に対して 1 つの dt と 1 つの dd のみを使用し、両方に対して display を table cell に設定します。

1 に答える 1