圣杯布局和双飞翼布局是什么

圣杯布局和双飞翼布局

是什么

圣杯布局和双飞翼布是左右两栏固定宽度，中间部分自适应的三栏布局，并且要求中间栏要优先渲染。

圣杯布局是歪果仁提出的，双飞翼布局是圣杯布局的优化版，由淘宝UED提出。它们的效果图类似，但是在解决”中间栏div内容不被遮挡“问题上的实现方法不同。效果图：

圣杯布局

代码：

<!--html-->
 <div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  
<!--css-->
 .container {
      padding: 0 220px 0 200px;
      overflow: hidden;
    }

    .left,.middle,.right {
      position: relative;
      float: left;
      height:200px;
    }

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

    .r