为什么两个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不能正确对齐？
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
复制相关文章
相似问题
腾讯云开发者
