該問題的答案需要更新，因為瀏覽器已更改原始問題我已經瀏覽了StackOverflow上的幾篇文章，但未能找到這個相當簡單的問題的答案。我有這樣的HTML構造：<table> <tr> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> </tr></table>我需要的是div填充的高度td，因此我可以將div的背景（圖標）放置在的右下角td。您如何建議我去解決這個問題？
3 回答
胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
CSS高度：僅當元素的父級具有明確定義的高度時，才100％有效。例如，這將按預期工作：
td {
height: 200px;
}
td div {
/* div will now take up full 200px of parent's height */
height: 100%;
}
由于似乎您的<td>高度將是可變的，因此如果您在右下角的圖標中添加了絕對定位的圖像，該怎么辦？
.thatSetsABackgroundWithAnIcon {
/* Makes the <div> a coordinate map for the icon */
position: relative;
/* Takes the full height of its parent <td>. For this to work, the <td>
must have an explicit height set. */
height: 100%;
}
.thatSetsABackgroundWithAnIcon .theIcon {
position: absolute;
bottom: 0;
right: 0;
}
像這樣的表格單元格標記：
<td class="thatSetsABackground">
<div class="thatSetsABackgroundWithAnIcon">
<dl>
<dt>yada
</dt>
<dd>yada
</dd>
</dl>
<img class="theIcon" src="foo-icon.png" alt="foo!"/>
</div>
</td>
編輯：使用jQuery設置div的高度
如果您將保留<div>為的子代，則<td>此jQuery片段將正確設置其高度：
// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
var $div = $(this);
// Set the div's height to its parent td's height
$div.height($div.closest('td').height());
});
森林海
TA貢獻2011條經驗 獲得超2個贊
您可以嘗試使div浮動：
.thatSetsABackgroundWithAnIcon{
float:left;
}
或者，使用內聯塊：
.thatSetsABackgroundWithAnIcon{
display:inline-block;
}
內聯塊方法的工作示例：
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<td>
<div style="border:1px solid red; height:100%; display:inline-block;">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is higher
<br/>than the
<br/>first one
</td>
</tr>
</table>
- 3 回答
- 0 關注
- 1476 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消