常常会用到百分比布局:

<div class="wrap">
	<div class="red">aa</div><div class="blue">bb</div><div class="yellow">cc</div>
</div>
.wrap div{width:33.33%;display:inline-block;height:60px;}
.red{background:red}
.blue{background:blue;}
.yellow{background:yellow;}

效果如下:

blob.png

如果这时候给三个div加上边框呢

.wrap div{width:33.33%;display:inline-block;height:60px;border:1px solid #000}
.red{background:red}
.blue{background:blue;}
.yellow{background:yellow;}

结果可想而知:

blob.png

之前想到一个方法是通过js来重新计算页面尺寸,然后重新给三个div设置宽度,其实完全不用这么麻烦

.wrap div{width:33.33%;display:inline-block;height:60px;border:1px solid #000;box-sizing:border-box}
.red{background:red}
.blue{background:blue;}
.yellow{background:yellow;}

将box-sizing设置为border-box;即可,问题解决

blob.png


还有一种方法:使用calc,是一个css3函数,用于动态计算长度

blob.png

代码:

<div class="wrap">
	<div class="red">aa</div><div class="blue">bb</div><div class="yellow">cc</div>
</div>
.wrap div{width:calc(33.33% - 2px);display:inline-block;height:60px;border:1px solid #000}
.red{background:red}
.blue{background:blue;}
.yellow{background:yellow;}