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

您不需要使用 float，摆脱它，而只对一个 dl 使用一个 dt 和一个 dd，并为两者设置显示到表格单元格。

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