demo篇：页面布局-三栏布局

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

1、浮动解决方案

<section class="layout float">
  <style media="screen">
    .layout.float .left{
      float: left;
      width: 300px;
      background: red;
    }
    .layout{
      margin-top: 10px;
    }
    .layout.float .right{
      float: right;
      width: 300px;
      background: aqua;
    }
    .layout.float .center{
      background: yellow;
    }
  </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>浮动解决方案</h1>
      1.这是三栏布局中间部分
      1.这是三栏布局中间部分
      1.这是三栏布局中间部分
    </div>
  </article>
</section>

2、绝对定位解决方案

<section class="layout absolute">
  <style>
    .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: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>绝对定位解决方案</h1>
      1.这是三栏布局绝对定位中间部分
      2.这是三栏布局绝对定位中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

3、flexbox解决方案

<section class="layout flexbox">
  <style>
    .layout.flexbox{
      margin-top: 120px;
    }
    .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: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
        <h1>flexbox解决方案</h1>
        1.这是三栏布局flexbox中间部分
        2.这是三栏布局flexbox中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

4、表格布局解决方案

<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width: 100%;
      display: table;
      height: 100px;
    }
    .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: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>表格布局解决方案</h1>
      1.这是三栏布局表格布局中间部分
      2.这是三栏布局表格布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

5、网格布局解决方案

<section class="layout grid">
  <style>
    .layout.grid .left-center-right{
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background: red;
    }
    .layout.grid .center{
      background: yellow;
    }
    .layout.grid .right{
      background: aqua;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>网格布局解决方案</h1>
      1.这是三栏布局网格布局中间部分
      2.这是三栏布局网格布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

参考文献1
参考文献2