4

CSSにこのdivがあります：

#bodycontent {
    max-width:980px;
    margin:auto; 
}

#navleft {
    width:18%;   
    border:0px;
    float:left;
}

#rightcontent {
    max-width:80%;
    border:0px;
    float:right;
}

そしてHTMLで：

<div id="bodycontent">
    <div id="navleft">
        some stuff
    </div>
    <div id="rightcontent">
        some stuff
    </div>
</div>

今、私は2つの問題を抱えています:

  1. div を 20% と 80% に設定すると、div が横に表示されるのではなく、上に 1 つ、下に 1 つ表示されます。
  2. rightcontent div に 25px の padding-left を設定したいのですが、ここでも padding を設定すると、div が他の div よりも下になります。

なんで？パディングは中にありませんか？

4

3 に答える 3

6

widthプロパティは( CSS 2 で)境界線間のスペースではなく、コンテンツの幅として定義されます。パディングは、幅の内側ではなく、境界線の内側に入ります。

CSS 3 では、box-sizingプロパティでこれを変更できますが、サポートが制限されています。

于 2013-02-11T17:57:19.090 に答える
4

あなたが直面している問題は、ボックスモデルが原因です。宣言する幅はコンテンツの幅であり、要素の実際の幅ではありません。

ボックス モデルの詳細については、

これを変更して、境界線とパディングがすべて要素の幅の一部になるようにするには、使用できますborder-box

#your-element { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: 
     border-box; box-sizing: border-box; 
}
于 2013-02-11T17:59:49.377 に答える
2

css box modelについて読んでください。

あなたのコンテンツは最も内側のボックスであり、widthあなたが指定したものがあります。パディング、ボーダー、およびマージンはすべて、この幅に追加されます。パディングは境界線の内側になりますが、コンテンツの幅の内側にはなりません。

于 2013-02-11T17:58:14.287 に答える