中间固定 两边平分的 自适应三栏布局

NEC 和网上有很多关于两栏三栏布局的案例，而关于三栏布局大体为： 两边固定大小 中间自适应；

无意中一个朋友问我： 中间固定 两边平分的 自适应三栏布局 怎么实？！

当时第一时间想到的是用 display: flex; 然而这个属性不是全兼容的，目前市场上一些国产机的浏览器 实现不了想要的结果；

回去细想后觉得用position是个方法——不管怎样这是在布局中被我用坏了的属性，总能帮我解决很多问题!

以下是贴出的代码：

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .lcr-out {
        position: relative;
        width: 100%;
        height: 300px;
    }

    .left,.left-inner ,.center,.right,.right-inner{
        height: 100%;
    }

    .left,.right{
        position: absolute;
        top: 0;
        width: 50%;
    }
    /*left*/
    .left {
        left: 0;
    }
    .left-inner {
        margin-right: 100px;
        background: #00f;
    }
    /*center*/
    .center {
        position: relative;
        z-index: 2;
        width: 200px;
        margin: 0 auto;
        background: #000;
        color: #fff;
    }
    .right {
        right: 0;
    }
    .right-inner {
        margin-left: 100px;
        background: #f00;
    }

</style>

<div class="lcr-out">
      <div class="left">
          <div class="left-inner"></div>
      </div>
      <div class="center"></div>
      <div class="right">
          <div class="right-inner"></div>
      </div>
  </div>

有不合理的地方请谅解并给予指导！