.wrapper
{
width:
100%
/*
也可以固定宽度
*/
height:
200px
}
.wrapper
>
div
{
display:
inline-block
/*
如需支持ie8以下版本，用浮动来做
*/
width:
calc(100%
/
3)
/*
此处运用了一个css3的表达式，将div三等分，ie8及以上可以支持，当然也可以根据需要设置固定值
*/
width:
-webkit-calc(100%
/3)
width:
-moz-calc(100%
/
3)
height:
100%
}
以上经亲自测过，ie8+、chrome、firefox表现良好。
先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
最简单的办法是：使用 box-flex 的每一个子元素都加上一句： width: 0%，原因不明，反正有效。具体CSS修改如下：
.test{background:red
display:-webkit-box
width:600px
height:300px
}
.test1{
background:green
-webkit-box-flex:1
width: 0% /* ****加上这一行**** */
}
.test2{
background:blue
-webkit-box-flex:1
overflow: hidden
width: 0% /* ****加上这一行**** */
}
.test3{
background:yellow
-webkit-box-flex:1
width: 0% /* ****加上这一行**** */
}
