页面布局

高度已知左右固定中间自适应

---

• float布局
  缺点：清除浮动的处理
  优点：兼容性好

<section class="layout float">
    <style>
      .layout.float .left-right-center div{
        height: 100px;
      }
      .layout.float .left{
        float: left;
        width: 200px;
        background: blue;
      }
      .layout.float .right{
        float: right;
        width: 200px;
        background: red;
      }
      .layout.float .center{
        background: green
      }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>内容标题</h1>
          <p>主要内容</p>
        </div>
    </article>   
  </section>

• 绝对定位
  缺点：下面子元素脱离文档流，有效性差
  优点：快捷

<section class="layout absolute">
    <style>
      .layout.absolute .left-center-right>div{
        position: absolute;   
        height: 100px;     
      }
      .layout.absolute .left{
        width: 200px;
        left: 0;
        background: blue;
      }
      .layout.absolute .right{
        right: 0;       
        width: 200px;
        background: red;
      }
      .layout.absolute .center{
        left: 200px;     
        right:200px;
        background: green
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          <p>主要内容</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

• flexbox
  解决上述两个缺点的，移动端很好的兼容

<section class="layout flex">
    <style>
      .layout.flex .left-center-right>div{
        height: 100px;
      }
      .layout.flex .left-center-right{
        display: flex;
      }
      .layout.flex .left{
        width: 200px;
        background: blue;
      }
      .layout.flex .right{     
        width: 200px;
        background: red;
      }
      .layout.flex .center{
        flex: 1;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          <p>flex</p>
      </div>
      <div class="right"></div>
    </article>
  </section>

• table
  优点：兼容性好
  缺点：一个单元格影响其他单元格

<section class="layout table">
    <style>
      .layout.table .left-center-right{
        display: table;
        width: 100%;
        height: 100px;

      }
      .layout.table .left-center-right>div{
        display: table-cell;
      }
      .layout.table .left{
        width: 200px;
        background: blue;
      }
      .layout.table .right{     
        width: 200px;
        background: red;
      }
      .layout.table .center{
        background: green;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          表格
      </div>
      <div class="right"></div>
    </article>
  </section>

• grid
  优点：各种复杂布局，代码简单

  <section class="layout grid">
    <style>
      .layout.grid .left-center-right{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 200px auto 200px;
      }
      .layout.grid .left{
        background: blue;
      }
      .layout.grid .right{     
        background: red;
      }
      .layout.grid .center{
        background: green;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
          <h1>内容标题</h1>
          网格
      </div>
      <div class="right"></div>
    </article>
  </section>