在 TD 中使用相对位置/绝对位置? ？

我有以下密码:

<td style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;


<div style="position: absolute; bottom: 0px;">
Notice
</div>
</td>

这根本行不通。由于某些原因，在 TD 上没有读取位置: 关系命令，并且通知 DIV 被放置在页面底部的内容容器之外。我已尝试把运输署的所有资料放入「设计资料图」，例如:

<td>
<div style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;


<div style="position: absolute; bottom: 0px;">
Notice
</div>
</div>
</td>

然而，这产生了一个新的问题。由于表单元格内容的高度是可变的，所以通知 DIV 并不总是位于单元格的底部。如果一个表格单元格超过了60px 的标记，但是其他单元格都没有超过，那么在其他单元格中，通知 DIV 低于60px，而不是在底部。

159834

小开

关于你的第二次尝试，你尝试使用垂直对齐吗？都行

<td valign="bottom">

或者用 CSS

vertical-align:bottom

小开

最佳答案

这是因为根据 position: relative1，position: relative对表元素的影响是未定义的。说明这一点的是，position: relative在 Chrome13上有预期的效果，但在 Firefox4上没有。这里的解决方案是在内容周围添加一个 div，并将 position: relative放在该 div上，而不是放在 td上。下面的例子说明了 position: relative(1)在 div上的结果，(2)在 td上的结果(不好) ，最后(3)在 td内的 div上的结果(又是好的)。

On Firefox 4

<table>
<tr>
<td>
<div style="position:relative;">
<span style="position:absolute; left:150px;">
Absolute span
</span>
Relative div
</div>
</td>
</tr>
</table>

小开

如果在 td 上执行“ display: block;”，破坏 td 标识，那么也可以工作，但是可以工作！

小开

可变高度的表格单元格内容可达60px 以上;

<div style="position: absolute; bottom: 0px;">
Notice
</div>

小开

这个技巧也很合适，但是在这种情况下，对齐属性(中间，底部等)将不起作用。

<td style="display: block; position: relative;">
</td>