Html CSS显示：表格单元格浮动会在文本中产生额外的空间

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

我尝试过使用top:0%，但没有成功

---

小提琴：

您只需更改宽度和浮动即可

根据您的代码，我做了一些更改：

我将

#side-news2

中的浮动从

右侧

更改为

左侧

。 并将

宽度：30%

添加到

#side news

、

#side-news2

和

#section wrapper

。 请注意，所有

宽度

（

30%

+

30%

+

30%

）不能超过

#正文内容

中的宽度（设置为

90%

）

---

​

你为什么要用桌上型还是方块型？太棒了…多谢了…只是喜欢stackoverflow Forum出于好奇我想知道为什么浮子会这样：对吧？不允许这种情况发生？我尝试使用.clearfix和overflow:auto，但似乎不起作用。

float:right

起作用，但在主要内容和右侧

旁边的
栏之间会有一些空间。（如您现在在中看到的）
#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%;
}