为什么两个div不对齐？
为什么两个div不对齐？
提问于 2012-12-08 23:06:12
<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不能正确对齐？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-12-08 23:12:13
这是因为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/
Stack Overflow用户
发布于 2012-12-08 23:13:51
顶部比它的父容器宽
#top{
width:auto;
}Stack Overflow用户
发布于 2012-12-08 23:34:21
问题是如何计算盒子模型的宽度。屏幕上的所有元素都有4个组件(从内到外)：内容、填充、边框和边距。默认情况下，宽度仅包括内容。通过添加边框，top变得大于200像素。使用chrome中的开发人员工具，它被渲染为206px。
有两种可能的解决方案，一种是模糊宽度，另两种是修改盒子模型。第一种方法可以工作，但很难维护。任何微小的改变都会使对齐变得混乱。
更好的解决方案是使用box-sizing: border-box。通过添加CSS样式，width属性将包括内容、填充和边框。因此，最初的填充和边框包裹在外面，但使用边框时，侵占了内部。
- 原始：http://jsfiddle.net/deafcheese/Gv5BZ/
- 已更正(使用
boz-sizing: border-box)：http://css-tricks.com/box-sizing/
参考：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13778734
复制相关文章
相似问题
腾讯云开发者
