我可以绝对将元素放置在< td>的右上角吗?元素? [英] Can I absolutely position an element in the top right corner of a <td> element?

问题描述

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

I have a table and I need the cells to have an element positioned in the upper right corner of each cell.

我已经阅读了其他几个问题，但都没有一个能解决这个问题.

I've read several other questions asking the same thing but none of them seem to fix the problem.

我已经读过一种解决方案，可以将单元格的内部以相对位置包装在div中，但这是行不通的，因为div不能填充整个单元格，即使高度和宽度设置为100％.

One solution I have read say to wrap the inside of the cell in a div with relative positioning, but that doesn't work because the div doesn't fill the whole cell, even with height and width set to 100%.

我读过的另一种解决方案是手动设置单元格的高度并将div的高度手动设置为相同的值.这对我也不起作用，因为表是动态生成的，而且我不能保证单元格的大小.

The other solution I have read says to manually set the height of the cells and manually set the height of the div to the same value. This doesn't work for me either because the tables are being dynamically generated and I can't guarantee a certain size for the cells.

以下是说明问题的代码:

Here's some code that illustrates the problem:

<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进入每个单元格的右上角?

Is there any way I can get the red div into the top right corner of every cell?

推荐答案

Firefox似乎是唯一不能绝对通过 position:relative (因为错误63895 ).其他浏览器在这里没有任何问题.从22版开始，Firefox支持Flexbox的最新语法，其中a)可以模拟表的行为，b) position:relative 不会出现问题.将其用作仅适用于Firefox的解决方法怎么样?

Firefox seems to be the only browser that can't absolutely position something directly in the td with position:relative (because of the bug 63895). Other browsers don't have any problems here. And since version 22, Firefox has supported the latest syntax of Flexbox which a) can emulate table behavior, b) doesn't have problems with position: relative. What about using it as a workaround just for 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;
}

小提琴

这篇关于我可以绝对将元素放置在< td>的右上角吗?元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！