0

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

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

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

4

1 回答 1

1

您可以通过更改宽度和浮动来简单地做到这一点。

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

我将浮动#side-news2从更改right为left。并添加width: 30%到#side-news、#side-news2和#section-wrapper。请注意，所有的width( 30%+ 30%+ 30%) 不能超过一个 in #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%;
}

​</p>

于 2012-07-24T03:22:17.387 回答