在 TD 中使用位置相对/绝对? [英] Using Position Relative/Absolute within a TD?
问题描述
我有以下代码:
<td style="position: relative; min-height: 60px; vertical-align: top;">表格单元格内容，高度可变，可以大于60px；<div style="position: absolute; bottom: 0px;">注意</td>
这根本行不通.出于某种原因，位置:相对命令没有在 TD 上被读取，并且通知 DIV 被放置在我页面底部的内容容器之外.我曾尝试将TD的所有内容放入一个DIV中，例如:
<div style="position: relative; min-height: 60px; vertical-align: top;">表格单元格内容，高度可变，可以大于60px；<div style="position: absolute; bottom: 0px;">注意</td>
然而，这产生了一个新问题.由于表格单元格内容的高度是可变的，通知 DIV 并不总是在单元格的底部.如果表格单元格超出 60 像素标记，但其他单元格均未超出，则在其他单元格中，通知 DIV 位于下方 60 像素处，而不是底部.
解决方案 这是因为根据 CSS 2.1，position:relative 对表格元素的影响未定义.为了说明这一点，position:relative 在 Chrome 13 上具有预期的效果，但在 Firefox 4 上没有.您的解决方案是在您的内容周围添加一个 div 并将 <代码>位置:相对于该 div 而不是 td 的.下面说明了使用 position:relative (1) 在 div good), (2) 在 td(没有好)，最后(3)在 td 内的 div 上(再次好).
<tr><td><div style="position:relative;"><span style="position:absolute; left:150px;">绝对跨度</span>相对div</td></tr></table>
I have the following code:
<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>
This does not work at all. For some reason, the position:relative command isn't being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page. I have tried to put all the contents of the TD into a DIV such as:
<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>
However, this creates a new problem. Since the height of the contents of the table cell is variable, the notice DIV isn't always at the bottom of the cell. If a table cell stretches beyond the 60px marker, but none of the other cells do, then in the other cells, the notice DIV is at 60px down, instead of at the bottom.
解决方案 This is because according to CSS 2.1, the effect of position: relative on table elements is undefined. Illustrative of this, position: relative has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div around your content and put the position: relative on that div instead of the td. The following illustrates the results you get with the position: relative (1) on a div good), (2) on a td(no good), and finally (3) on a div inside a td (good again).
<table>
<tr>
<td>
<div style="position:relative;">
<span style="position:absolute; left:150px;">
Absolute span
</span>
Relative div
</div>
</td>
</tr>
</table>
这篇关于在 TD 中使用位置相对/绝对?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆