-1

我有一个里面div有一个表格。表格有一行和两列。我想要一个div在第二列内，我希望它与表格列绝对定位（不是页面的开头）。所以这里是我做了什么：

这是html文件：

<body>
    <div id="one">
        <table id="table">
            <tr id="two">
                <td id="three"></td>
                <td id="three">
                    <div id="four"></div>
                </td>
            </tr>
        </table>
    </div>
</body>

这是CSS：

#one {
width: 100%;
height: 100px;
background-color: #f00;
}

#three {
width: 100px;
height: 80px;
background-color: #b6ff00;
/*margin-left: 100px;*/
/*float: left;*/
position: relative;
}

#four {
width: 50px;
height: 40px;
background-color: #0ff;
position: absolute;
left: 20px;
top: 20px;
}

此代码在 Chrome 和 IE 上运行良好。但在 Firefox 上不起作用。在 Firefox 中，<div id=four>的位置从页面的左上角开始，而不是从 。<div id=three>我能做些什么呢？（我应该提到我应该为我的设计使用一张桌子。我不能在这里使用其他任何东西）

4

2 回答 2

1

我有这个完全相同的问题，发现上述答案都没有解决它，然后在另一个线程中找到了一个解决方案，为我的项目修复了它。

穿上display: block;那td是父母的div。而已。

您可能有兴趣知道我使用您的示例代码对此进行了测试，并使其正常工作，而在我迄今为止测试过的其他浏览器中没有负面影响。您的里程可能会根据项目的需要而有所不同。

一个缺点是它确实会破坏td身份 - 对于某些表格布局，您将需要额外的 CSS 技巧来重新格式化，对于其他人来说这可能不可行。

我发现的答案链接： 在 TD 中使用相对位置/绝对位置？

于 2013-09-27T20:36:29.550 回答
0

Give the parent position:relative and you are done.

于 2013-06-28T05:38:37.287 回答