html – 如何获得一个div垂直填充表格单元格？

发布时间：2020-12-14 23:46:56 所属栏目：资源来源：网络整理

导读：作为 this question在表单元格中的绝对定位的后续行动,我试图在Firefox中获得一些工作.再次,我在那里约95％,只有一点点让我无法宣布胜利.使用以下示例标记： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

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

如何获得包装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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!