Question

<div id="container">
  <div id="top"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="clear"></div>
</div>

#container{
  width:200px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;   
}

#top{
  width:200px;
  height:20px;
  border:medium ridge #FFF;
}
#left{
  float:left;
  width:50px;
  height:20px;
  border:medium ridge #FFF;
}
#right{
  float:right;
  width:40px;
  height:20px;
  border:medium ridge #FFF;
}
#clear{
  clear:both;  
}

为什么#right和#top没有正确对齐？

Answer 1

因为top元素实际上溢出了容器的边界，而浮动元素right被限制在它内。 top元素溢出container，因为边框不包含在宽度中。所以top实际上占用了204px。

问题通过示例说明：http://jsfiddle.net/KhJ6e/2/

要修复此问题，请调整top以考虑每侧的2px边框。（从容器宽度减去4）或根据您的意图指定宽度为auto。

#top{
    width:196px;
    height:20px;
    border:medium ridge #FFF;
}

示例：http://jsfiddle.net/KhJ6e/1/

Answer 2

顶部宽于其父容器

#top{
  width:auto;
}

Answer 3

问题是如何计算箱型号的宽度。屏幕上的所有元素都有4个组件（从内到外）：内容，填充，边框，边距。默认情况下，宽度仅包含内容。通过添加边框，顶部变得大于200像素。使用chrome中的开发人员工具，它呈现为206px。

有两种可能的解决方案，一种是软化宽度，另一种是修改盒子模型。第一个会起作用，但很难维护。任何小的改变都会使对齐变得混乱。

更好的解决方案是使用box-sizing: border-box。通过添加CSS样式，width属性将包括内容，填充和边框。所以，最初的填充和边框环绕外部，但是使用border-box，侵犯了里面。

原文：http://jsfiddle.net/deafcheese/Gv5BZ/
更正（使用 boz-sizing: border-box）：http://jsfiddle.net/deafcheese/Gv5BZ/1/
框大小参考：http://css-tricks.com/box-sizing/

为什么两个div不对齐？

3 个答案: