Question

我有一个表格单元格，我希望其中的div始终位于左下角。以下在IE和Safari中工作正常，但Firefox将div绝对定位在页面上，而不是在单元格内（基于解决方案解决方案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>

Answer 1

根据W3C，position：relative对表格单元格没有影响：

“位置：相对”的影响 table-row-group，table-header-group，桌脚组，桌排， 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>

Answer 2

看看这是否适合您。不确定问题的确切性，但它与使用相对定位的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>

Answer 3

将display:block放在桌子上，现在FF尊重位置：relative。

Answer 4

position: relative标记显然不支持{p> td全局支持。不幸的是，我无法找到明确的消息来源。

您可能希望将div块放入具有所需大小的td块中，然后将position: relative应用于该块。

Answer 5

这听起来很明显，但您是否尝试在.manage中使用vertical-align: bottom;？

Answer 6

在TD中有一个DIV，宽度为：100％，高度为100％，然后将其设置为position：relative。

Answer 7

右，position：relative对表元素没有影响，firefox应用此规则。 div的解决方案有效，但在我看来这是一个糟糕的标记。

您是否绝对需要使用表格来显示此内容？（或者它是相对的吗？）

如果没有，为什么不使用div元素并做你想做的事？

使用表格进行布局问题是如此......

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

7 个答案: