回顾经典的css布局结构--圣杯和淘宝双飞翼

前端页面的三栏布局为常见的展现结构，中间栏(main)的宽度不确定，左右两栏的宽度固定。本文总结回顾经典的圣杯布局和淘宝双飞翼布局。

圣杯布局：

<!-- 样式代码 -->
 <style>
    * {
      margin: 0;
      padding: 0;
    }


    .container {
      padding: 0 200px 0 220px;
    }

    .main, .left, .right {
      float: left;
      position: relative;
      min-height: 130px;
    }

    .main {
      background: yellow;
      width: 100%;
    }

    .left {
      background: red;
      width: 220px;
      margin-left: -100%;
      left: -220px;
    }

    .right {
      background: green;
      width: 200px;
      margin-left: -200px;
      right: -200px;
    }
  </style>

<!-- div结构 -->
<div class="container">
  <div class="main">main</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

双飞翼布局：

<!-- 样式代码 -->
 <style>
     * {
      margin: 0;
      padding: 0;
    }

    .left,
    .main,
    .right {
      position: relative;
      float: left;
      min-height: 130px;
    }

    .left {
      margin-left: -100%;
      width: 200px;
      background: red;
    }

    .right {
      margin-left: -220px;
      width: 220px;
      background: green;
    }

    .main {
      width: 100%;
      background: blue;

    }

    .inner {
      margin: 0 200px 0 220px;
    }

  </style>

<!-- div结构 -->
<div class="container">
  <div class="main">
    <div class="inner">
      inner
    </div>
  </div>
  <div class="left">
    <h4>left</h4>
  </div>
  <div class="right">
    <h4>right</h4>
  </div>
</div>