一道面试题，构造一个如图的容器，在宽度自由伸缩的情况下比例保持不变。
方法一：flex
<div class='outer'> <div class='third'></div> <div class='third'></div> <div class='third'></div> </div> .outer{ display:flex; justify-content:space-between; } .outer .third{ flex:auto; border:1px solid black; height: 100px; box-sizing:border-box; }问题：1、兼容性问题IE11一下都不支持 2、border未合并
方法二：display:inline
.outer2 .third{ width:33%; border:1px solid black; height: 100px; display: inline-block; margin:0; padding:0; box-sizing:border-box; } <div class='outer2'> <div class='third'></div><div class='third'></div><div class='third'></div> </div>问题：1、兼容性问题，inline-block问css2.1属性 2、border未合并 3、严格来讲未占满父元素
补充一下，inline-block的兼容性可以用
*display:inline; *zoom:1;
来解决
注：三个子元素必须写在同一行，否则会出现间距。不将width设置为33.3%是因为低级浏览器不支持box-sizing属性，width+border会超出一行的宽度
方法三：float
.outer3{ overflow: hidden; } .outer3 .third{ width:33%; border:1px solid black; height: 100px; margin:0; padding:0; box-sizing:border-box; float:left; } <div class='outer3'> <div class='third'></div> <div class='third'></div> <div class='third'></div> </div>问题：1、border未合并 2、严格来讲未占满父元素
方法四：table
table{ width:100%; border-collapse:collapse; } td{ border:1px solid black; height:100px; margin:0; padding:0; } <table> <tr> <td></td> <td></td> <td></td> </tr> </table>问题：使用table布局影响页面效率
欢迎补充新方法
补充一下，关于border未合并的问题，将border宽度设置为偶数值，mragin-left和margin-right设置为border的一半可以解决这个问题
转载于:https://www.cnblogs.com/lichliu/p/6384411.html
