面试经常考的布局（CSS布局 -- 圣杯布局 & 双飞翼布局）

按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。

在这里，实现了左(300px) 右(300px) 宽度固定，中间自适应，container部分高度保持一致。

下面我写了物种常用的方式：

通用样式

      html *{
        margin:0;
        padding:0;
      }
      .layout{
        height:200px;
        background:yellow;
        margin-bottom:20px;
        color:#fff;
        font-size:22px;
        line-height:200px;
        text-align:center;
      }

一：float布局

<!--float布局-->
      <article class="float layout">
        <div class="left">float布局-left</div>
        <div class="right">float布局-right</div>
        <div class="middle">float布局-middle</div>
      </article>

/*float布局*/
      .float div{
        height:200px;
      }
      .float div.left{
        background:red;
        float:left;
        width:300px;
      }
      .float div.middle{
        background:#000;
      }
      .float div.right{
        background:green;
        float:right;
        width:300px;
      }

二：position 布局

<!--position布局-->
      <article class="position layout">
        <div class="left">position布局-left</div>
        <div class="middle">position布局-middle</div>
        <div class="right">position布局-right</div>
      </article>

/*position 布局*/
      .layout{
        position: relative;
      }
      .position div{
        height:200px;
      }
      .position div.left{
        position: absolute;
        background:red;
        width:300px;
        left:0;
        top:0;
      }
      .position div.middle{
        position: absolute;
        background:#000;
        right:300px;
        top:0;
        left:300px;
      }
      .position div.right{
        position: absolute;
        background:green;
        width:300px;
        right:0;
        top:0;
      }

三：table-cell布局

<!--table-cell布局-->
      <article class="table-cell layout">
        <div class="left">table-cell布局-left</div>
        <div class="middle">table-cell布局-middle</div>
        <div class="right">table-cell布局-right</div>
      </article>

/*table-cell布局*/
      .table-cell{
        display:table;
        width:100%;
      }
      .table-cell div{
        height:200px;
        display:table-cell;
      }
      .table-cell div.left{
        width:300px;
        background:red;
      }
      .table-cell div.middle{
        background:#000;
      }
      .table-cell div.right{
        width:300px;
        background:green;
      }

四：flex 布局

<!--flex布局-->
      <article class="flex layout">
        <div class="left">flex布局-left</div>
        <div class="middle">flex布局-middle</div>
        <div class="right">flex布局-right</div>
      </article>

/*flex 布局*/
      .flex{
        display:flex;
      }
      .flex div{
        height:200px;
      }
      .flex div.left{
        background:red;
        width:300px;
      }
      .flex div.right{
        width:300px;
        background:green;
      }
      .flex div.middle{
        background:#000;
        flex:1;
      }

五：grid 网格布局

<!--grid网格布局-->
      <article class="grid layout">
        <div class="left">grid网格布局-left</div>
        <div class="middle">grid网格布局-middle</div>
        <div class="right">grid网格布局-right</div>
      </article>

/*grid 网格布局*/
      .grid{
        display:grid;
        grid-template-columns: 300px auto 300px;
      }
      .grid div.left{
        background:red;
      }
      .grid div.middle{
        background:#000;
      }
      .grid div.right{
        background:green;
      }

当然了还可以用其他方式，这里只写了常规的，面试经常会问到，能说出这几种也还是不错的，这个题还可以延伸，比如Dom渲染顺序的调整,需要将middle 自动调整宽度的内容先渲染出来，这样Dom的顺序就必须放在其他left、right两个div模块的前面排第一，这样你又能写出几种。

github地址：github.com/miqidian/la…