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/