前端面试系列：页面布局之三栏布局

直接上题目吧，假设高度已知，写出三栏布局，其中左右宽度各300px,中间自适应。很简单的一道题目，分分中就可以写出好几种解决方案，话不多说，直接上代码吧。

// 方案一，浮动。左右均是浮动，中间就可以做到自适应
  <section class="layout float">
    <style>
      .layout.float .left{
        float: left;
        width: 300px;
        background: blue;
      }
      .layout.float .right{
        float: right;
        width: 300px;
        background: red;
      }
      .layout.float .center{
        background: yellow;
      }
    </style>
    <article class="wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h2>浮动解决方案</h2>
        中间栏
      </div>
    </article>
  </section>
// 绝对定位，
  <section class="layout absolute">
    <style>
      .layout.absolute .wrapper>div{
        position: absolute;
      }
      .layout.absolute .left{
        left: 0;
        width: 300px;
        background: blue;
      }
      .layout.absolute .right{
        right: 0 ;
        width: 300px;
        background: red;
      }
      .layout.absolute .center{
        left: 300px;
        right: 300px;
        background: yellow;
      }
    </style>
    <article class="wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h2>绝对定位解决方案</h2>
        中间栏
      </div>
    </article>
  </section>

相信浮动和绝对定位这两种解决方案，大家都可以很快的写出来。但是面试的时候写出这两种就够了吗？我想只写出这两种肯定是不会让面试官满意的，这种开放性题目,解决方式越多，面试得分就会越高，我们应该尽量多写出几种答案。利用flex和table也可以实现三栏布局。

// flex
  <section class="layout flexbox">
    <style>
      .layout.flexbox .wrapper{
        display: flex;
        
      }
      .layout.flexbox .left{
        
        width: 300px;
        background: blue;
      }
      .layout.flexbox .right{
        
        width: 300px;
        background: red;
      }
      .layout.flexbox .center{
        flex: 1;
        background: yellow;
      }
    </style>
    <article class="wrapper">
      <div class="left"></div>
      
      <div class="center">
        <h2>flexbox解决方案</h2>
        中间栏
      </div>
      <div class="right"></div>
    </article>
  </section>

  <section class="layout table">
    <style>
      .layout.table .wrapper{
        width: 100%;
        display: table;
        height: 100px;  
      }
      .layout.table .wrapper>div{
        display: table-cell;  
      }
      .layout.table .left{
        
        width: 300px;
        background: blue;
      }
      .layout.table .right{
        
        width: 300px;
        background: red;
      }
      .layout.table .center{
        background: yellow;
      }
    </style>
    <article class="wrapper">
      <div class="left"></div> 
      <div class="center">
        <h2>table解决方案</h2>
        中间栏
      </div>
      <div class="right"></div>
    </article>
  </section>

如果能想出以上四种解决方案，相信一定会给面试官留下比较好的印象。那么还有没有解决方案呢？答案是肯定的，那就是grid布局。

  <section class="layout grid">
    <style>
      .layout.grid{
        margin-top: 10px;
      }
      .layout.grid .wrapper{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }
      .layout.grid .left{
        background: blue;
      }
      .layout.grid .right{
        background: red;
      }
      .layout.grid .center{
        background: yellow;
      }
    </style>
    <article class="wrapper">
      <div class="left"></div> 
      <div class="center">
        <h2>grid解决方案</h2>
        中间栏
      </div>
      <div class="right"></div>
    </article>
  </section>

虽然grid算是下一代的标准，普及度还不高，但如果你能写出来的话，说明你对技术有较高的追求，面试官会更喜欢你的。那么问题来了，这道题只是给出尽可能多的答案就够了吗？显然不是，这么多的解决方法，他们的优缺点又是什么呢？是不是感觉又懵了。下面我们简单的说说几种方法的优缺点吧。

• 浮动:优点是兼容性好，缺点是要处理清楚浮动的问题，而且浮动的方式是脱离了文档流的
• 决定定位：优点是兼容性好，快捷，缺点是脱离了文档流
• flex:解决了脱离文档流的问题，实现起来也很简单。缺点是兼容性没有上两种方法好
• table:兼容性好，简单,但是好像不提倡用table布局
• grid：下一代的标准，兼容性差，实现起来简单

到这里，这道题就应该才算是回答完。不过还可以延伸开来，比如如果高度不是固定的，以上的解决方案中哪几种还是有效的？同理，对于两栏布局或居中布局，大家也可以按照此思路来准备面试。
对于解决方案和各方案的优缺点，欢迎大家补充。如果有什么错误，也欢迎大家提出来。