使dt和dd的高度相同,以在dt上应用背景色 [英] make dt and dd the same height to apply a background color on dt
本文介绍了使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>
使用此样式:
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相同,这样我就可以为其应用背景颜色而没有一些洞".
if dd spans more than 1 line, I want the dt's height to be the same as the dd so that I can apply a background color to it without having some "holes".
推荐答案
此处没有简单的CSS修复程序".
There isn't an "easy CSS fix" here.
在这种情况下,我可能会使用 table
,因为它看上去确实类似于表格数据(这使得真正轻松解决问题).
In this case, I would probably use a table
, because that does look somewhat like tabular data (and it makes solving your problem really easy).
<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 & 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
}
这篇关于使dt和dd的高度相同,以在dt上应用背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文