-1

我希望我的 body div 填充页面的宽度并坐在我的侧栏旁边的右侧，我不明白如何摆脱右侧创建的空白空间。当我在边栏中使用填充时，似乎出现了问题。我的代码如下。

我的 html 是

<div class="header">
</div>
<div class="side">
<a href="#"> menu</a> </br>
<a href="#"> menu</a> </br>
<a href="#"> menu</a> </br>
<a href="#"> menu</a> </br>
<a href="#"> menu</a>
</div>
<div class="body">
</div>

我的CSS是

.header{
background-color: #111;
width:100%;
height:120px
}

.side{
   float:left;
display:inline;
width:20%;
height:1000px;
background-color: #777;
padding:20px;

}

.body{
float:left;
display:inline;
height:1000px;
width:70%;
background-color: #d33;
}

​</p>

4

2 回答 2

2

忘记float:left;你的.body并添加margin-left:20%;而不是它。然后你的.body类应该适合你的页面的整个宽度。你也可以在没有的情况下工作display:inline;这是我的解决方案：

.side{
  float: left;
  width: 20%;
  height: 1000px;
  background-color: #777;
  padding: 20px;
  box-sizing: border-box;
}

.body{
  margin-left: 20%;
  height:1000px;
  background-color: #d33;
}
于 2012-10-09T15:10:49.030 回答
2

除非您尝试支持 IE7 及更早版本，否则您可以尝试使用 display:table-cell 代替。它消除了我们在浮动方面必须处理的许多 BS。

您的 html 可以这样构造：

<div class="header"></div>
<div class="content">
    <div class="side">
         <a href="#"> menu</a>
         <a href="#"> menu</a>
         <a href="#"> menu</a>
         <a href="#"> menu</a>
         <a href="#"> menu</a>
     </div>
     <div class="body"></div>
 </div>

还有你的 CSS：

.header {
    background-color: #111;
    width:100%;
    height:120px;
}
.content { display:table; width:100%; }
.side, .body {
    display:table-cell;
    height:1000px;
    vertical-align:top;
}
.side {
    width:20%;
    background-color: #777;
    padding:20px;
}
.side a {
    /* just as an aside, you REALLY don't need those <br/> tags... 
       just make your a tags inside your .side into block elements */
    display:block;
}
.body {
    width:80%;
    background-color: #d33;
}

请参阅此 jsFiddle 以供参考：http: //jsfiddle.net/mori57/r8H4h/

于 2012-10-09T15:23:16.230 回答