Question

"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;来居中体内的所有内容。

Answer 1

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

您应该使用display: table-cell

将display:table-row div包装在另一个div中

Answer 2

猜测一下，我说你的margin-top设置了<table>。看一下Firebug。

table {
margin-top: 0;
}

你有这样的特殊原因吗？您可以浮动div并执行高级布局而无需设置display: table-cell。此外，表格只应用于表格数据。

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

Update0

2 个答案: