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

<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>