html – div在td中绝对定位时留空间_html-js-css

概述我试图理解绝对的位置.我有以下代码段 div#div1 { position: absolute; left: 0; right: 0; height: 100px; border: 1px solid green; background-color: green; width: 100%;}td { position: relative; border: 我试图理解绝对的位置.我有以下代码段

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中绝对定位时留空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1138266.html