css3新增的box-sizing属性完美解决div并排占位问题

2015年06月24日 18:27 by:唠吧小站

当多个div并排的时候通常我们会设置div的宽度并且设置float就可以了。但是如果div设置了宽度 margin和padding宽度的时候往往会出现重新换行的bug, 在css3协议了新增了一个box-sizing属性来解决这个问题。

例如两个宽度50%的div要并排的时候如果给div设置了边框或margin值的时候会换到下一行,这时候box-sizing就派上用场了:

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%;  float:left; }

w3shool测试地址: http://www.w3school.com.cn/tiy/....css3_box-sizing

标签:css3 box-sizing