调整具有边框的html元素

Question

我有一个问题，它可能看起来很基本，但它已经困扰我很长时间了。

我的问题是宽度百分比。假设我有一个800像素的容器div，里面有2个div，它们都设置为float：left和width 50％。这会让他们并排填充容器，但是如果我想为这些内部容器添加边框，则会使它们太大而不能在容器内并排固定，并且会使其下降一个。

所以我的问题是：是否有一个大小的方法来自动填充容器，并考虑到边框而无需手动指定像素宽度（在800px容器的情况下，两个div中的每一个都带有1px边框会使每个div 398px宽...）？

感谢

Answer 1

是有方法称为box-sizing 这样写：

.parent{ 
    overflow:hidden; 
    width:800px; 
} 
.child{ 
    width:50%; 
    float:left; 
    background:red; 
    border:2px solid green; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 

入住这http://jsfiddle.net/QevgD/

阅读这篇文章http://www.quirksmode.org/css/box.html

但它的工作，直到上述IE8 &。