HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – div在td中绝对定位时留空间大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图理解绝对的位置.我有以下代码段
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时,它工作正常.

有人可以解释为什么只使用左右定位时会留下一些空间.

解决方法

表格单元格的默认垂直对齐是基线.在第一个<表>中可以看到这种效果.下面.

这导致表格内容,文本或< div>,被放置在垂直中心周围.

如果你想移动< div>到顶部,vertical-align: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中绝对定位时留空间全部内容,希望文章能够帮你解决html – div在td中绝对定位时留空间所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。