Question

我有一张桌子，我需要单元格在每个单元格的右上角放置一个元素。

我已经阅读了其他一些问同样的问题，但似乎没有一个问题可以解决这个问题。

我读过的一个解决方案是将单元格的内部包裹在具有相对定位的div中，但这不起作用，因为div不会填满整个单元格，即使高度和宽度设置为100％。

我读过的另一个解决方案是手动设置单元格的高度，并手动将div的高度设置为相同的值。这对我来说不起作用，因为表是动态生成的，我无法保证单元格的大小。

以下是一些说明问题的代码：

<table border="1">
<tr>
    <td>
        <div style="position:relative; height: 100%; background: yellow;">
            <p>This is some content</p>
            <div style="position:absolute; right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
    <td>
        <div style="position:relative;  height: 100%;  background: yellow;">
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <div style="position:absolute;right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
</tr>

以下是该示例的示例http://jsfiddle.net/hqtEQ/

有没有办法让红色div进入每个单元格的右上角？

Answer 1

td的默认垂直对齐方式居中;所以，如果你不担心单元格中的其他内容，只需替换

<td>

与

<td style="vertical-align: top;">

（或为此效果添加CSS类），您的布局将按预期工作。

请参阅http://jsfiddle.net/hqtEQ/1/

Answer 2

Firefox似乎是唯一一款无法使用td直接在position:relative中定位的浏览器（因为bug 63895）。其他浏览器在这里没有任何问题。从版本22开始，Firefox支持Flexbox的最新语法，a）可以模拟表行为，b）position: relative没有问题。如何将它用作Firefox的解决方法？

td {
    position: relative;
    background: yellow;
}

:-moz-any-link > html, tr {
    display: flex;
    flex-direction: row;
}

:-moz-any-link > html, td {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Fiddle

我可以绝对将元素放在元素的右上角吗？

2 个答案: