Как я могу поместить элемент в нижней части своего контейнера в Firefox?

У меня есть ячейка таблицы, и я хочу, чтобы div внутри него всегда находился в нижнем левом углу. В IE и Safari работает отлично, но Firefox позиционирует div абсолютно на странице, а не внутри ячейки (код основан на решении here). Я тестировал как с DTD, так и без него, которые помещают Firefox в режим Quirks и режим Стандартов, и ни одна из них не работает должным образом. Я застрял - какие-то идеи?Как я могу поместить элемент в нижней части своего контейнера в 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: relative по-видимому, не глобально поддерживается для td тега. К сожалению, я не смог найти окончательные источники.

Возможно, вы захотите поместить блок div в td с требуемым размером и применить вместо этого position: relative.

источник

2008-11-14 15:17:41 Lasar

Попытка этого, я не могу получить div, чтобы заполнить td. – 2008-11-14 15:29:09

Это может показаться действительно очевидным, но вы пробовали использовать vertical-align: bottom; в .manage?

источник

2008-11-14 15:18:15 Powerlord

Согласно W3C, позиция: относительная не оказывает никакого влияния на ячейки таблицы:

«Эффект„позиции: относительная“на таблицы-строки-группы, таблицы заголовка-группы, таблицы -footer-group, table-row, table-column-group, table-column, Элементы таблицы-таблицы и таблицы-заголовка не определены. "

Решение состоит в том, чтобы добавить дополнительный контейнер для обтекания в ячейку таблицы.

EDIT: Для этого дельта необходимо установить 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

имеет DIV внутри TD с шириной: 100% и высотой: 100%, затем установите это положение: относительное.

источник

2008-11-14 15:36:21 jishi

Право, положение: относительное не влияет на элементы таблицы, и firefox применяет это правило. Решение div работает, но это ужасная разметка, на мой взгляд.

Вам нужно использовать таблицу для отображения этого содержимого? (Или это относительный?)

Если нет, то почему бы вам не использовать элементы div и делать то, что вы хотите?

Чтобы использовать таблицы для разметки вопросов так 1998 ...

источник

2008-11-14 15:36:57 alexmeia

Положите display:block на стол и теперь FF уважает позицию: относительная.

источник

2010-07-20 15:20:08 Wouter

Как я могу поместить элемент в нижней части своего контейнера в Firefox?

ответ

Смежные вопросы