构建一个1:1:1的容器

一道面试题，构造一个如图的容器，在宽度自由伸缩的情况下比例保持不变。

方法一：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的一半可以解决这个问题