如何在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的容器底部放置一個元素？

回答

相關問題