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

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

10 голосов
/ 14 ноября 2008

У меня есть ячейка таблицы, и я хочу, чтобы элемент div всегда находился в левом нижнем углу. Следующее прекрасно работает в IE и Safari, но Firefox размещает div абсолютно на странице, а не внутри ячейки (код, основанный на решении решения здесь ). Я тестировал как с DTD, так и без него, что переводило Firefox в режим Quirks и Standards, но ни один из них не работал должным образом. Я застрял - есть идеи? 

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

Ответы [ 7 ]

7 голосов
/ 14 ноября 2008

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

«Эффект« позиция: относительный »на таблица-строка-группа, таблица-заголовок-группа, таблица-подвал-группа, таблица-строка, таблица-столбец-группа, таблица-столбец, элементы 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>
1 голос
/ 20 июля 2010

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

1 голос
/ 14 ноября 2008

Посмотрите, работает ли это для вас. Не уверен в точном понимании проблемы, но это как-то связано с использованием 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>
0 голосов
/ 14 ноября 2008

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

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

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

Использование таблиц для разметки - это так 1998 ...

0 голосов
/ 14 ноября 2008

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

0 голосов
/ 14 ноября 2008

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

0 голосов
/ 14 ноября 2008

position: relative, по-видимому, не поддерживается глобально для тега td. К сожалению, я не смог найти точные источники.

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

...