如何在Firefox中将元素放置在其容器的底部？

Question

如何在Firefox中将元素放置在其容器的底部？

我有一个表格单元格,我希望其中的div始终位于左下角.以下工作在IE和Safari罚款,但Firefox是定位div绝对的页面上,而不是电池(基于解决方案的解决方案代码中的位置).我已经使用和不使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Aro*_*eel 7

根据W3C,position:relative对表格单元格没有影响:

"'position:relative'对table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table-caption的影响元素未定义."

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

编辑:此div需要height:100%和position:relative;设置.

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Bor*_*nov 1

看看这是否适合你。不确定问题的确切性质，但它与使用 td 和相对定位有关。我用 div 标签包裹了表格并相对定位它，它似乎做了你想要的。

<!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; }
        th { width:100px; }
        div.body {position:relative; width:500px;}
        .manage { text-align:right; position:absolute; bottom:0; right:0; display:block}
        </style>
    </head>
    <body >
    <div class="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>
    </table></div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	17 年，2 月前
查看次数：	12559 次
最近记录：	15 年，3 月前