三栏布局的四种实现方式-中间自适应

左右固定，中间自适应，纯css的实现方式

<div class="main">

        <div class="left">200px</div>

        <div class="right">300px</div>

        <div class="middle">auto</div>

    </div>

    <style>

      div[class*="main"]{margin-top: 20px;}

      .main div{height: 50px;}

    .main .left{width: 200px;float: left;background: red;}

    .main .right{width: 300px;float: right;background: green}

    .main .middle{margin-left: 210px;margin-right: 310px;background: grey}

      </style>

    <div class="main1">

        <div class="left">200px</div>

        <div class="right">20%</div>

        <div class="middle">auto</div>

    </div>

    <style>

      .main1 div{height: 50px;}

    .main1 .left{width: 200px;float: left;background: red;}

    .main1 .right{width: 20%;float: right;background: green}

    .main1 .middle{margin-left: 210px;margin-right: 21%;background: grey}

      </style>

      <div class="main2">

          <div class="left">200px</div>

          <div class="middle">auto</div>

          <div class="right">20%</div>

      </div>

      <style>

        .main2{display: flex;}

        .main2 .left{width: 200px;background: red;}

        .main2 .right{width: 20%;background: green}

        .main2 .middle{background: grey;flex: 1}

      </style>

    <div class="main3">

        <div class="left">200px</div>

        <div class="middle">auto</div>

        <div class="right">20%</div>

    </div>

    <style>

      .main3 .left{width: 200px;background: red;float: left;}

      .main3 .right{width: 20%;background: green;float: left;}

      .main3 .middle{background: grey;float: left;width: calc(100% - 200px - 20%)}

    </style>