CSS - DL样式定义列表，在单独的行上使用dt和dd

Question

我正在尝试在顶行设置一个定义列表，并且在单独的行上直接坐在下面有相应的dd

HTML

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>

    <dt>Term 2</dt>
    <dd>Definition 2</dd>

    <dt>Term 3</dt>
    <dd>Definition 3</dd>
</dl>

CSS

dl {
    margin: 0;
    padding: 0 0 30px;
}
dt, dd {
    float: left;
    margin: 0;
    width: 33%;
}

我需要他们坐下面的东西：

Answer 1

在每个<dl>和<dd>对周围没有包含元素（<dt>没有提供或允许），并且没有采用可能脆弱的绝对定位，我认为你＆＃ 39;重新发现你需要不同的标记来完成这种布局。

它不像原始标记那样语义清晰，因为它将<dl>拆分为三个单独的定义列表，但是here's a working fiddle。