gpt4 book ai didi

html - div 在 td 中绝对定位时留出空间

转载 作者:太空狗 更新时间:2023-10-29 14:07:42 25 4
gpt4 key购买 nike

我想了解绝对位置。我有以下代码片段

div#div1 {
position: absolute;
left: 0;
right: 0;
height: 100px;
border: 1px solid green;
background-color: green;
width: 100%;
}

td {
position: relative;
border: 1px solid blue;
height: 18px;
width: 100%;
}

table {
width: 100%;
}
<table>
<tr>
<td>
<div id="div1">
This is a heading with an absolute position
</div>
</td>
</tr>
</table>

由于绝对定位,我在顶部得到了一些额外的空白。当我指定 top:0px 时,它工作正常。

谁能解释一下为什么只使用左右定位时会留下一些空间。

最佳答案

默认vertical-align表格单元格是 baseline .这样的效果可以看第一个<table>以下。

这会导致表格内容、文本或 <div> , 放置在垂直中心附近。

如果你想移动 <div>到顶部,vertical-align: top;会成功的。或者 top: 0; .

div#div1 {
position: absolute;
left: 0;
right: 0;
height: 100px;
border: 1px solid green;
background-color: green;
width: 100%;
box-sizing: border-box;
}

td {
position: relative;
border: 1px solid blue;
height: 100px;
width: 100%;
}

table {
width: 100%;
}
<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<td>
Some text
</td>
</tr>
</table>

<table>
<tr>
<td>
<div id="div1">This is a heading with an absolute position</div>
</td>
</tr>
</table>
</body>

</html>

关于html - div 在 td 中绝对定位时留出空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47939115/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com