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有两种不同的背景颜色

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

由于我的dt内容文字很短，dt内容只出现在1行。 由于我的dd内容文本非常长，因此dd内容会显示在多行中。

如何使用相同的行数（如表格）渲染2个背景？

由于

http://jsfiddle.net/5yVwN/

Answer 1

你不需要使用float，摆脱它，而是只使用一个dt和一个dd用于一个dl，并将display设置为table cell。

像http://jsfiddle.net/5yVwN/

一样