作为 this question 的后续行动关于表格单元格内的绝对定位,我试图让某些东西在 Firefox 中工作。再一次,我已经完成了大约 95%,只有一件小事阻止我宣布胜利。使用以下示例标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
</head>
<body >
<table>
<tr>
<th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
<td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
<tr>
<th>Cras diam.</th>
<td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
<tr>
<th>Cras diam.</th>
<td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
</table>
</body>
</html>
如何让wrap div始终填充单元格,使管理区域位于单元格的底部?是的,我放在表格中的数据(在我看来)是表格形式的,所以我想在这里使用表格。作为最后的手段,我可能会求助于丑陋的嵌套 div 解决方案,但由于此处的表格在语义上是正确的,因此我想尽可能使用一个。请注意,背景颜色只是为了显示元素的相对大小——我不关心布局的背景。另请注意,我希望单元格具有灵活的高度,以便它们仅扩展到足以容纳其内容。
最佳答案
您可以将(相同的)固定高度放在表格单元格上并这样包装 div:
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { height:200px; border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
关于html - 如何让 div 垂直填充表格单元格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/291537/