html – CSS表格单元格中的表格元素抵消了其他表格单元格内容

html – CSS表格单元格中的表格元素抵消了其他表格单元格内容,第1张

概述“center”div中的下表元素导致“left”div中的内容从顶部偏移几个像素(在我的浏览器中为8).在表之前添加一些文本会删除此偏移量. 为什么?如何在我的桌子前不需要“虚拟”文本行的情况下阻止这种情况发生? <html><head> <style type="text/css"> #left { display: table-cell; “center”div中的下表元素导致“left”div中的内容从顶部偏移几个像素(在我的浏览器中为8).在表之前添加一些文本会删除此偏移量.

为什么?如何在我的桌子前不需要“虚拟”文本行的情况下阻止这种情况发生?

<HTML><head>    <style type="text/CSS">        #left {            display: table-cell;            background-color: blue;        }        #menu {            background-color: green;        }        #center {            background-color: red;            display: table-cell;        }    </style><body>    <div ID="left">        <div ID="menu">            Menu 1<br>            Menu 2<br>        </div>    </div>    <div ID="center">        <table><tr><td>This is the main contents.</tr></td></table>    </div>    <div ID="left">        <div ID="menu">            Menu 1<br>            Menu 2<br>        </div>    </div></body></HTML>

Update0

请注意,对于浮点数,我无法将居中的列扩展到其内容.我从中提取此示例的源使用display:table; margin-left:auto; margin-right:auto;把身体的一切都集中在一起.

解决方法 我能够通过添加vertical-align:top来修复它;采用’#left’风格.

你应该用display:table-row包装display:table-cell divs在另一个div中

总结

以上是内存溢出为你收集整理的html – CSS表格单元格中的表格元素抵消了其他表格单元格内容全部内容,希望文章能够帮你解决html – CSS表格单元格中的表格元素抵消了其他表格单元格内容所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1062300.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存