3

关于 TD 内部的绝对定位，stackexchange 上有很多问题，但我没有找到针对我的具体问题的解决方案：

我需要实现以下布局 TD内部的元素布局

此单元格是表格中表格数据表示的一部分。

单元格的内容是文本数据。

文本可以是多行的，并且必须垂直和水平居中对齐。单元格的高度可能会有所不同，因为表格行高可能会被其他单元格的内容拉伸，但单元格文本应始终保持垂直对齐（目前通过 实现vertical-align: middle）

绝对定位元素应始终位于单元格的右上角。

我知道将相对 div 放置在 TD 中，然后将绝对定位元素放置在 div 中的技术，但由于单元格高度可变和垂直对齐单元格文本的要求，这似乎不是一个选项。

解决方案需要兼容 IE8+、Chrome 21+ 和 FF 15+

4

1 回答 1

1

在关闭按钮周围插入一个 div：

<table>
    <tr>
       <td>
          <div class="wrapper">
              <div class="close">X</div>
          </div>
          My vertically aligned text.
       </td>
    </tr>
</table>

然后定位您的关闭按钮：

table td div.wrapper {
    position: relative;
}

table td div.close {
    position: absolute;
    right: 0;
    top: 0;
}
于 2013-01-09T13:36:27.333 回答