圣杯布局和双飞翼布局

image.png

圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。
一:圣杯布局

<!-- 圣杯布局 -->
    <div class="header"></div>
    <div class="container">
      <div class="content cloumn">我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间</div>
      <div class="left cloumn">我是左边</div>
      <div class="right cloumn">我是右边</div>
    </div>
    <div class="footer"></div>

二:双飞翼布局

<!-- 圣杯布局 -->
    <div class="header"></div>
    <div class="container">
      <div class="main cloumn">
      <div class="content">我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间</div>
  </div>
      <div class="left cloumn">我是左边</div>
      <div class="right cloumn">我是右边</div>
    </div>
    <div class="footer"></div>