1 
<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;  
}

为什么#rightand#top不正确对齐？

4

3 回答 3

3

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

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

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

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

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

于 2012-12-08T15:12:12.723 回答
2

顶部比它的父容器宽

#top{
  width:auto;
}
于 2012-12-08T15:13:51.460 回答
1

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

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

更好的解决方案是使用box-sizing: border-box. 通过添加该 CSS 样式，宽度属性将包括内容、填充和边框。因此，最初的 padding 和border 环绕在外部，但使用border-box，则侵占了内部。

于 2012-12-08T15:34:20.893 回答