0

#main div を右にフロートすると、右の境界線がヘッダー div の右の境界線と揃わないのはなぜですか?

* {
     margin: 0;
     padding: 0;
}

html, body {
     height: 100%;
}

#wrapper {
     width: 960px;
     height: 100%;
     margin: 0 auto;
}

#header {
     width: 960px;
     height: 70px;
     border: 1px solid black;         
     margin-bottom: 20px;
     margin-top: 20px;
}

#leftcol {
     width: 250px;
     height: 500px;
     border: 1px solid black; 
     float: left;
     margin-right: 20px;          
 }

 #main {  
    width: 686px;
    height: 500px;
    border: 1px solid black;
    float:right;
 }

HTML

<html>
  <body>
    <div id="wrapper">
      <div id="header">
      </div>
      <div id="leftcol">
      </div>  
      <div id="main">
      </div>
    </div><!--end wrapper-->
  </body>
</html>
4

2 に答える 2

2

@alfonso が指摘したように、ボーダーは div の実際のサイズを増やしています。

box-sizing: border-box境界線が内側に入るように、境界線のあるすべての要素で使用することをお勧めします。アライメントがはるかに簡単になります。

于 2012-08-22T00:36:15.330 に答える
1

ヘッダーの境界線の幅を考慮するのを忘れました。合計すると、ヘッダーの幅はボーダー = から960px+で、メイン コンテンツとサイドバーの幅はです。2px962px960px

ヘッダーの幅を に設定すると958px、両方の div が整列します。

計算に役立つ CSS ボックス モデルのリファレンスは次のとおりです。CSS ボックス モデル

于 2012-08-22T00:33:40.183 に答える