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 个背景？

谢谢

http://jsfiddle.net/5yVwN/

Answer 1

您不需要使用浮点数，摆脱它，而是只使用一个 dt 和一个 dd 用于一个 dl，并将两者的显示设置为表格单元格。

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