html - 如何让 div 垂直填充表格单元格?

标签 html css

作为 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/

相关文章:

javascript - 为什么选择更改方法不起作用?

javascript - 文本和图像转换器

html - CSS Transform 替换 div 子内容

html - 在屏幕中心对齐文本

javascript - 从中心向外辐射显示图像,而不是按行从左上角显示图像

html - 如何使用 Font Awesome 图标为标题提供边框底部

html - 使用 CSS 进行网页设计过程 - 期间还是之后?

css - 删除 Surface 3 IE 上的透明浅灰色高光

javascript - 如何使图像之间的过渡平滑

javascript - 预订时隙时创建列跨度