我遇到使用表格布局的设计问题。所以我使用2个旁边的侧面导航和一个居中的主要部分内容（它都包含在一个部分包装中） 部分包装器中的文本顶部有一些白色间距。这是由于在旁边元素上左右浮动。如果我删除它们，文本会回到顶部但是我的旁边元素会占据整个空间（我在旁边使用了一个框边框来显示它，因为我想为我的设计选择旁边元素，所以我不喜欢我希望它占据主体内容的整个空间）
我尝试使用top：0％但没有运气。
答案 0 :(得分：1)
您可以通过更改宽度和浮动来完成。
根据您的代码，我做了一些更改：
我将#side-news2中的浮动从right更改为left。
并将width: 30%添加到#side-news，#side-news2和#section-wrapper。
请注意，所有width（30% + 30% + 30%）都不能超过#body-content中的90%（#body-content {
display: table;
width:90%;
margin: 0 auto;
background: lightblue;
border-color: rgba(255, 255, 255, 0.7); /* highlight on inner box */
border-width: 1px;
border-style: solid;
-moz-border-radius: 3px; /* FF */
-webkit-border-radius: 3px; /* Safari, Chrome */
border-radius: 3px; /* modern browsers */
-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
}
#side-news {
border:1px solid black;
width:30%;
top:0%;
display:table-cell;
float:left;
list-style:none;
}
#side-news2 {
border:1px solid black;
width:30%;
display:table-cell;
float:left;
list-style:none;
}
#section-wrapper {
width:30%;
display:table-cell;
margin: 0px;
float:left;
top:0%;
margin-top:0%;
border:1px solid black;
margin-top:0%;
}
）
{{1}}