Html 使dt和dd具有相同的高度，以便在dt上应用背景色

我有这个标记：

<dl class="item_tabs_details">
    <dt>Lot Size</dt>
    <dd>324 sq. meters</dd>

    <dt>Baths</dt>
    <dd>2</dd>

    <dt>Full Description</dt>
    <dd>
        <p>
        House & Lot for Sale/Rent, 4BR, 1165sqm. PHP65M/200K/MO. (Pasig) Beautiful
        house with 4 bedrooms, den/office, entertainment room, covered lanai, swimming
        pool and manicured garden.
        </p>
    </dd>
</dl>

如果dd跨越超过1行，我希望dt的高度与dd相同，这样我就可以在没有“孔”的情况下对其应用背景色。

这里没有“简单的CSS修复”

在本例中，我可能会使用一个

表

，因为它看起来确实有点像表格数据（这使解决问题变得非常容易）

批量
324平方米
洗澡
2.
完整描述
房屋及规划地政局局长；出售/出租地块，4BR，1165平方米。PHP65M/200K/MO（Pasig）漂亮的房子，有4间卧室、书房/办公室、娱乐室、有盖的拉奈、游泳池和修剪整齐的花园。
.项目\选项卡\详细信息{
宽度：890px
}
.item_tabs_details td..item_tabs_details th{
填充：10px；
边框底部：1px实心#eee；
垂直对齐：顶部
}
.项目选项卡详细信息{
宽度：130px；
背景：#ccc；
文本对齐：左对齐；
字体大小：正常
}

我认为这是因为您将填充设置为10px；嘿，有人真的同意桌子对这个案子没问题：）我自己也有点犹豫不决……是的，这是临界点。我正在考虑用相同的HTML发布一个答案，但是在

dl

上有一个

130x1

repeat-y

背景图像，但是

表

最终获胜。嘿，谢谢你。我以前用过桌子，但找不到一种使它水平的方法。此外，对于scope属性+1，这是我第一次看到。我反对表格，因为它们在响应性设计方面太过严格，这可能比第一次发布这个答案时更令人担忧。

dl.item_tabs_details dt, dl.item_tabs_details dd{
    float:left;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
dl.item_tabs_details dt{
    width:130px;
    background-color: #ccc;
    color: #000;
}

dl.item_tabs_details dd{
    width:760px;
    min-height: 12px;
}

<table class="item_tabs_details" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="row">Lot Size</th>
    <td>324 sq. meters</td>
  </tr>
  <tr>
    <th scope="row">Baths</th>
    <td>2</td>
  </tr>
  <tr>
    <th scope="row">Full Description</th>
    <td>House &amp; Lot for Sale/Rent, 4BR, 1165sqm. PHP65M/200K/MO. (Pasig) Beautiful house with 4 bedrooms, den/office, entertainment room, covered lanai, swimming pool and manicured garden.</td>
  </tr>
</table>

.item_tabs_details {
    width: 890px
}
.item_tabs_details td, .item_tabs_details th {
    padding: 10px;
    border-bottom: 1px solid #eee;
    vertical-align: top
}
.item_tabs_details th {
    width: 130px;
    background: #ccc;
    text-align: left;
    font-weight: normal
}