自适应网页设计中box-sizing 和 margin 一起使用的方法

假设有两个col2类名的元素，只使用 box-sizing: border-box; 可以实现自适应设计。
.col2 {
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

如果使用margin的话就会出现横向宽度移除导致第二个元素浮动下来。
.col2:first-child {
    margin-right: 24px;
}

解决方案：'margin-right'%+'margin-left'%+'width'% 等于 50% 即可。
.col2 {
    width: 45%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

参考资料
http://stackoverflow.com/questions/10808413/css3-box-sizing-margin-box-why-not
http://www.w3.org/TR/CSS2/box.html