三栏布局

<!--表格布局-->
<section class="layout table">
  <style>
    .layout.table .left-center-right {
      display: table;
      height: 150px;
      width: 100%;
    }

    .layout.table .left-center-right > div {
      display: table-cell;
    }

    .layout.table .left {
      width: 300px;
      /* 其他两个 table-cell 的高度也被撑开到 400px */
      height: 400px;
      background: red;
    }

    .layout.table .center {
      background: yellow;
    }

    .layout.table .right {
      width: 300px;
      height: 100px;
      background: blue;
    }
  </style>
  <h1>三栏布局</h1>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格布局解决方案</h2>
      1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>