Question

为什么我将#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>

Answer 1

正如@alfonso指出的那样，边框正在增加div的实际大小。

最好在所有带边框的元素上使用box-sizing: border-box，以便边框进入内部。对齐变得更容易。

Answer 2

您忘记考虑标题的边框宽度。总的来说，标题的宽度为960px + 2px来自border = 962px，而主要内容和侧边栏的宽度为960px。

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

以下是对CSS框模型的引用，可帮助您进行数学运算：CSS box model

无法让div一直向右浮动

2 个答案: