Html 在Firefox中，如何将元素放置在其容器的底部？_Html_Css_Positioning

Html 在Firefox中，如何将元素放置在其容器的底部？

html css

Html 在Firefox中，如何将元素放置在其容器的底部？,html,css,positioning,Html,Css,Positioning,我有一个表格单元格，我希望其中的div始终位于左下角。下面的内容在IE和Safari中运行良好，但Firefox将div绝对定位在页面上，而不是单元格中（代码基于解决方案）。我已经测试了DTD和不DTD，DTD将Firefox置于怪癖模式和标准模式，两者都不能正常工作。我被卡住了-有什么想法吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

我有一个表格单元格，我希望其中的div始终位于左下角。下面的内容在IE和Safari中运行良好，但Firefox将

div绝对定位在页面上，而不是单元格中（代码基于解决方案）。我已经测试了DTD和不DTD，DTD将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>


试验
表{宽度：500px；}
th，td{垂直对齐：顶部；边框：1px纯黑色；位置：相对；}
th{宽度：100px；}
.manage{文本对齐：右；位置：绝对；底部：0；右：0；}
关于以下内容的一些信息，这实际上将跨越几行
简短的宣传语编辑|删除
关于以下内容的一些信息，这实际上将跨越几行
简短的宣传语编辑|删除
看看这是否适合您。不确定问题的确切性质，但这与使用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>


试验
表{宽度：500px；}
th，td{垂直对齐：顶部；边框：1px纯黑色；}
th{宽度：100px；}
div.body{位置：相对；宽度：500px；}
.manage{text align:right；position:absolute；bottom:0；right:0；display:block}
关于以下内容的一些信息，这实际上将跨越几行
简短的宣传语编辑|删除
位置：td
标记显然不全局支持相对。不幸的是，我找不到确切的消息来源
您可能希望将一个div
块放入具有所需大小的td
中，并对其应用位置：relative
。
这听起来可能非常明显，但您是否尝试过使用垂直对齐：底部在.管理？
根据，位置：相对对表格单元格没有影响：
“位置：相对”对
表格行组、表格标题组、，
表尾组，表行，
表列组、表列、，
表单元格和表标题元素
没有定义。”
解决方案是在表格单元格中添加一个额外的包装div
编辑：此div需要高度：100%
和位置：相对待设置
<table>
    <tr>
        <td>
            <div style="position:relative;height:100%;">
                Normal inline content.
                <div class="manage">your absolute-positioned content</div>
            </div>
        </td>
    </tr>
</table>


正常内联内容。
您的绝对定位内容
在TD中有一个DIV，宽度为100%，高度为100%，然后将其设置为position:relative。右侧，position:relative对表元素无效，firefox应用此规则。
div的解决方案是可行的，但在我看来这是一个糟糕的标记
您是否确实需要使用表格来显示此内容？（还是相对的？）
如果不是，为什么不使用div元素并执行所需操作
将表格用于布局问题是如此的1998…
在表格上放置一个显示：block
，现在FF尊重位置：relative。
不幸的是，当我向表格中添加另一行看起来相同的行时，该行中断。尝试此操作，我无法使div填充td。这不会将其推到底部：（现在编辑代码示例。我在Firefox 3中测试了这一点，它起作用了。在FF3中，这对我来说并没有什么影响。height:100%
在这个上下文中完全不起作用。请参阅：“如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为“auto”因此，由于父级td
没有明确的高度，div的高度被计算为其内容的高度，而不考虑其100%的规格。我显示的数据是表格形式的。一列显示注释的上下文，另一列显示注释本身。为什么在提供了一个语义丰富的列表，它适合我的情况？好的，但有一个定义列表（dl）表也可以是语义解决方案，而不是语义解决方案。它们不是真正的定义。有没有办法确保dt和dd在内容更改时保持相同的高度？这可能是一个解决方案：我非常兴奋-它似乎做了我需要的一切。甚至在左侧和右侧（dt和dd）之间有一个边界。不幸的是，如果dt内容比dd内容长，它会在IE中中断。这不起作用-内部div不会被推到底部。你找到了这样做的方法吗？很遗憾听到这个消息…我最终添加了一个新的无边界“”在FF18中，为了保持底部内容，这会导致表格不保持其宽度，并且元素绝对位于表格的偏移父级上（在本例中为窗口）