html – 如何在Firefox的容器底部放置一个元素？

发布时间：2020-12-14 18:57:03 所属栏目：资源来源：网络整理

导读：我有一个桌面单元格,我想要一个div,总是在左下角.以下工作在IE和Safari中可以正常工作,但Firefox将绝对放置在页面上,而不是在单元格内(基于解决方案解决方案 here的代码).我已经测试了有没有DTD,这使得Firefox在Quirks模式和标准模式下都无法正常工作.我被困

我有一个桌面单元格,我想要一个div,总是在左下角.以下工作在IE和Safari中可以正常工作,但Firefox将绝对放置在页面上,而不是在单元格内(基于解决方案解决方案 here的代码).我已经测试了有没有DTD,这使得Firefox在Quirks模式和标准模式下都无法正常工作.我被困 – 任何想法？

<!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; }
        th,td { vertical-align: top; border:1px solid black; position:relative; }
        th { width:100px; }
        .manage { text-align:right; position:absolute; bottom:0; right:0; }
        </style>
    </head>
    <body >
    <table>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table>
    </body>
</html>

解决方法

根据 W3C,位置：相对对表格单元没有影响：

“The effect of ‘position:relative’ on
table-row-group,table-header-group,
table-footer-group,table-row,
table-column-group,table-column,
table-cell,and table-caption elements
is undefined.”

解决方案是为表单元格添加一个额外的包装div.

编辑：这个div需要一个高度：100％和位置：相对;被设置.

<table>
    <tr>
        <td>
            <div style="position:relative;height:100%;">
                Normal inline content.
                <div class="manage">your absolute-positioned content</div>
            </div>
        </td>
    </tr>
</table>

（编辑：李大同）

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