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

我有一个表格单元格，我想让它内部的div总是在左下角。以下在IE和Safari中运行正常，但Firefox将div绝对放置在页面上，而不是在单元格内（基于解决方案解决方案here的代码）。我已经测试了使用和不使用DTD，它们使Firefox处于怪癖模式和标准模式，并且都不能正常工作。我卡住了 - 有什么想法？如何在Firefox的容器底部放置一个元素？

<!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>

来源

2008-11-14 Chris Marasti-Georg

你有没有找到办法做到这一点？ – Alex 2012-04-09 23:15:37

@jitbit我没有。 – 2012-04-10 12:54:10

对不起，听说...我终于增加了一个新的无边框“”来保存底部内容。 – Alex 2012-04-12 07:16:42

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

来源

2008-11-14 15:15:31

不幸的是，当我向看起来相同的表中添加另一行时，这个问题就会中断。 – 2008-11-14 15:28:36

position: relativetd显然不是全局支持的。不幸的是我找不到确切的资料。

您可能希望将div块放入所需大小的td，并将position: relative应用于此。

来源

2008-11-14 15:17:41 Lasar

尝试此操作，我无法获得div来填充td。 – 2008-11-14 15:29:09

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

来源

2008-11-14 15:18:15 Powerlord

按照W3C，位置：相对于具有上表细胞没有影响：

“的影响：在表列的基团‘的位置相对’，表头基团，表-footer-group，table-row， table-column-group，table-column， table-cell，and table-caption elements is undefined。“

解决方法是添加一个额外的换行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>

来源

2008-11-14 15:20:48

这不会推到底部:( – 2008-11-14 15:30:01

现在编辑的代码示例我测试了这个在Firefox 3中，它的工作原理 – 2008-11-14 15:40:17

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

来源

2008-11-14 15:36:21 jishi

右，position：relative对表元素没有影响，并且firefox应用此规则。该div的解决方案，但在我看来这是可怕的标记。

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

如果没有，为什么不使用div元素并按照你的要求做？

要使用的布局问题表是1998年如此...

来源

2008-11-14 15:36:57 alexmeia

放一个display:block放在桌子上，现在FF尊重的位置：相对的。

来源

2010-07-20 15:20:08 Wouter

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

回答

相关问题