发表新帖
发表新帖

How can I position an element at the bottom of its container in Firefox?

后端 未结
关注
7 1288
迷失自我
迷失自我 2021-01-04 13:01

I have a table cell, and I want a div within it to always be at the bottom left corner. The following works fine in IE and Safari, but Firefox is positioning the div<

相关标签:
7条回答
  • 别那么骄傲
    2021-01-04 13:45

    have a DIV inside the TD with width: 100% and height: 100%, then set that to position: relative.

    0 讨论(0)
  • 傲寒
    2021-01-04 13:49

    Right, position:relative has no effect for table elements, and firefox apply this rule. The solution of the div works, but this is terrible markup in my opinion.

    Do you absolutely need to use a table to display this content? (Or is it relative?)

    If not, why don't you use div elements and do what you want?

    To use tables for layout issues is so 1998...

    0 讨论(0)
  • 攒了一身酷
    2021-01-04 13:50

    According to the W3C, position:relative has no effect on table cells:

    "The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."

    The solution is to add an extra wrapping div to the table cell.

    EDIT: This div requires a height:100% and position:relative; to be set.

    <table>
    <tr>
        <td>
            <div style="position:relative;height:100%;">
                Normal inline content.
                <div class="manage">your absolute-positioned content</div>
            </div>
        </td>
    </tr>
</table>
    0 讨论(0)
  • 南旧
    2021-01-04 13:52

    Put a display:block on the table and now FF respects the position:relative.

    0 讨论(0)
  • 借酒劲吻你
    2021-01-04 13:57

    See if this works for you. Not sure of the exact ature of the problem but it has something to do with using td with relative positioning. I wrapped the table with div tag and positioned that relatively and it seems to do what you want. 

    <!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 讨论(0)
  • 太阳男子
    2021-01-04 13:59

    position: relative is apparently not globally supported for the td tag. I couldn't find definitive sources unfortunately.

    You might want to put a div block into the td with the desired size and apply position: relative to that instead.

    0 讨论(0)
 看不清?
提交回复
热议问题