三栏布局(中间响应式)实现解决方案有哪些?

第一种 浮动解决方案

<section class="layout float">
  <style media="screen">
   html *{
    padding: 0;
    margin: 0;
  }
  .layout article div{
    min-height: 100px;
  }
  .layout.float .left{
    float:left;
    width:300px;
    background: red;
  }
  .layout.float .center{
    background: yellow;
  }
  .layout.float .right{
    float:right;
    width:300px;
    background: blue;
  }
  </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
  </article>
</section>
复制代码

第二种 绝对布局解决方案

<section class="layout absolute">
  <style>
  html *{
    padding: 0;
    margin: 0;
    }
  .layout article div{
    min-height: 100px;
    }
    .layout.absolute .left-center-right>div{
      position: absolute;
    }
    .layout.absolute .left{
      left:0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center{
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right{
      right:0;
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>
复制代码

第三种 flexbox布局解决方案

<section class="layout flexbox">
  <style>
    .layout.flexbox{
      margin-top: 110px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex:1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>
复制代码

第四种 表格布局解决方案

<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width:100%;
      height: 100px;
      display: table;
    }
    .layout.table .left-center-right>div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background: red;
    }
    .layout.table .center{
      background: yellow;
    }
    .layout.table .right{
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>
复制代码

第五种 网格布局解决方案

<section class="layout grid">
  <style>
    .layout.grid .left-center-right{
      width:100%;
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left-center-right>div{
    }
    .layout.grid .left{
      width: 300px;
      background: red;
    }
    .layout.grid .center{
      background: yellow;
    }
    .layout.grid .right{

      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>复制代码