CSS 显示：表格单元格浮动导致文本中有额外的空间

Question

我在使用表格布局进行设计时遇到问题。因此，我使用 2 个边栏进行侧面导航和居中的主要部分内容（全部包装在部分包装器中） 我在部分包装器中的文本在顶部有一些白色间距。这是由于侧面元素上的左右浮动。如果我删除它们，文本会回到顶部，但我的侧边元素会占据整个空间（我在侧边使用了框边框来显示它，因为我想为我的设计为侧边元素着色所以我不不希望它占据主体内容的整个空间）

我尝试过使用 top:0% 但没有运气。

小提琴：http://jsfiddle.net/chou_one/nPAJc/

Answer 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%;
}

​