假设有两个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