-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;してください。次に、クラスはページの幅全体に収まる必要があります。また、あなたはなしで働くことができますここに私の解決策があります：.bodymargin-left:20%;.bodydisplay: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 に答える