Question

我正在尝试设置描述列表<dl>的样式，以便即使<dd>后面有多个<dt>，它们也会显示为两列。问题是我希望它是动态的，所以不要浮动<dt>，然后在<dd> s上设置边距。

<dl>
  <dd>Term A</dd>
  <dt>Definition A1</dt>
  <dt>Definition A2</dt>
  <dd>Term B</dd>
  <dt>Definition B1</dt>
</dl>

通常情况下，我会使用众多解决方案中的一种来制作两个相同高度的柱子但是我没有在这里使用的容器元素所以它有点让我失望。有什么建议吗？

已更新为Fiddle

Answer 1

尝试以下代码。希望它会有所帮助。

dl {
 width:100%;
 overflow:hidden;
 background:#ff0;
}
dd, dt {
 float: left;
 width:20%; /* adjust the width; make sure the total of both is 100% */
 background:#dd0;
 height: 40px;
 margin: 0;
 padding: 0;
 line-height: 250%;
}

<强> JSFIDDLE DEMO

<强> Check it our this blog too

用于DT和DD的CSS等高

1 个答案: