问题描述
我有以下代码:
<td style="position: relative; min-height: 60px; vertical-align: top;">表格单元格内容,高度可变,可以大于60px;<div style="position: absolute; bottom: 0px;">注意
我有以下代码:
<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 中使用位置相对/绝对?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-26 10:25
-
使用Dbcc proc缓存和系统缓存
-
如何让方法返回传递给它的参数?
-
PHP的多阵列foreach循环
-
为什么我的程序打印垃圾?
-
如何检测Mysql/innodb中的死锁?
-
如何使用材料在同一行中制作图标和占位符?
-
如何在传统的PHP项目中使用symfony2验证器组件?
-
使用 Controller As 方法访问继承的范围
-
存储库的Git存档,具有未提交的更改
-
将现有博客代码集成到Django-CMS中?
-
Angularjs NG-控制器决心
-
在堆栈中搜索特定元素
-
我怎么能知道哪里的内存段是全零
-
对于每个下一个循环,仅返回第一行数据
-
如何从具有更新功能的Mysql数据制作图形
查看更多