html - 为什么两个div不对齐？

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 元素实际上溢出了容器的边界，而 float 元素 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/