在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;> 
注意
< / div> 
< / td> 
  

这根本不起作用。出于某种原因，TD上没有读取position：relative命令，并且通知DIV被放置在页面底部的内容容器之外。我曾尝试将运输署的所有内容纳入DIV，例如：

 < td> 
< div style =position：relative; min-height：60px; vertical-align：top;> 
表格单元格的内容可变高度可以超过60px; 
 
< div style =position：absolute; bottom：0px;> 
注意
< / div> 
< / div> 
< / td> 
  

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

解决方案

这是因为根据。

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).

For reference, here is the HTML source.

这篇关于在TD中使用位置相对/绝对？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！