Question

根据这个question，没有一种简单的方法可以解决这个问题，只需使用该表即可。但即便如此，还是有办法让它发挥作用吗？我的问题是我有dt的背景但是当dd的内容多于dt时，它的高度保持不变。如何让它们都具有相同的高度？我想在jquery中获得他们的高度，但这样做似乎有点复杂。我是jquery的初学者，所以我不确定它是否会成功。无论如何，我不想要negative margin和padding，因为我需要dl为overflow: visible，因为有一个下拉列表。

原始

JSFIDDLE

使用negative margin和padding

JSFIDDLE

无论如何，我不希望它不惜一切代价成为边距填充组合。但是至于将它转换为表格我是开放的，如果这是解决这个问题的唯一方法。请告诉我如何解决这个问题。非常感谢你！

Answer 1

可能会有所帮助：

点击这里： https://jsfiddle.net/buzjby59/2/

<dl>
  <dt>Term A</dt>
  <dd>Definition A1</dd>
  <dd>Definition A2</dd>
  <dd>Definition A3</dd>
  <dd>Definition A4</dd>
</dl>
<dl>
  <dt>Term B</dt>
  <dd>Definition B1</dd>
  <dd>Definition B2</dd>
  <dd>Definition B3</dd>
</dl>

body {
    margin: 0;
}
dl {
    width: 100%;
    display: table;
    margin:0 0 15px;
}
dt {
    background: #999999;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    width: 80px;
}
dd {
    background: #3399ff;
    margin-left: 0;
    display:block;
}
dt:after, dd:after {
    clear: both;
}

Answer 2

有jquery插件，例如这一个：http://css-tricks.github.io/Equalizer/

Answer 3

请看这个：

jsfiddle See fiddle

我使用display：table。
不确定如果它是你需要的。

Answer 4

嗯，这真的取决于你在最后一次尝试中做了什么因为如果没有一种简单的方法可以做到这一点，那么就有一些解决方法来实现这个目的。
设置背景的一种简单方法是使用它：

dl {
    width:100%;
    display:block;
    background:#999999;
}

但是，我建议您稍微更改一下代码以包含不同类型的标记，例如Div

如何使dt和dd标签具有相同的背景高度？

4 个答案: