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+2px从边框 = 962px，而主要内容加上侧边栏的宽度是960px.

如果将标题的宽度设置为958px，则两个 div 对齐。

这是对 CSS 盒模型的参考，可帮助您进行数学计算：CSS 盒模型

于 2012-08-22T00:33:40.183 回答