4

div中的以下表格元素"center"导致 div 中的内容"left"从顶部偏移几个像素（在我的浏览器中为 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

请注意，使用浮动时，我无法将居中的列扩展到其内容。我从中提取此示例的源用于display: table; margin-left: auto; margin-right: auto;将所有内容集中在正文中。

4

2 回答 2

4

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

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

于 2010-03-08T14:41:46.960 回答
0

猜测一下，我会说你margin-top的<table>. 看看 Firebug。

table {
margin-top: 0;
}

你有什么特别的理由这样布置吗？您可以浮动 div 并进行高级布局而无需设置display: table-cell. 此外，表格只能用于表格数据。

于 2010-03-08T14:15:16.693 回答