gpt4 book ai didi

html - CSS table-cell 中的 table 元素偏移其他 table-cell 内容

转载 作者:搜寻专家 更新时间:2023-10-31 08:22:18 28 4
gpt4 key购买 nike

"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>

更新0

请注意,使用 float 时,我无法让居中 列扩展到其内容。我从中提取此示例的来源使用 display: table;左边距:自动; margin-right: auto; 使 body 中的所有内容居中。

最佳答案

我能够通过将 vertical-align:top; 添加到“#left”样式来修复它。

您应该将 display:table-cell div 包装在另一个带有 display:table-row 的 div 中

关于html - CSS table-cell 中的 table 元素偏移其他 table-cell 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2401791/

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