html - 使 dt 和 dd 具有相同的高度以在 dt 上应用背景色

Question

我有这个标记:

<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>

使用这种风格:

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;
}

如果 dd 跨越超过 1 行，我希望 dt 的高度与 dd 相同，这样我就可以为其应用背景颜色而不会出现一些“孔”。

Answer 1

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

在这种情况下，我可能会使用表格，因为它看起来确实有点像表格数据(而且它可以真正地轻松解决您的问题)。

http://jsfiddle.net/UvPGG/

<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
}