右边自适应 左右布局_css圣杯布局-左右固定中间自适应

在前端经常遇到一道css的面试题：圣杯布局；我的理解就是布局的时候像一个圣杯。

实现的思路：

1.中间的盒子放在最上面，宽度设置为100%，都三个盒子都设置左浮动。这时左右的盒子就掉在了第二行。

2.左边的盒子使用负margin-left：左边盒子的宽度，然后左边盒子就会回到第一行。使用相对定位负 left: 左边的盒子宽度。

3.右边的盒子使用负margin-left:右边盒子的宽度，也会回到第一行。使用相对定位，left：右边盒子的宽度。

4.父盒子设置左右padding值为 左右盒子的宽度。给左右盒子留位置。

html代码:

<div class="box">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
 </div>

css代码：

    .box {
      padding: 0 200px;
      min-width: 400px;
      overflow: hidden;
    }
    .center {
      background-color: red;
      width: 100%;
      height: 300px;
      float: left;
    }
    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: blue;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right {
      float: left;
      width: 200px;
      height: 300px;
      margin-left: -200px;
      background-color: yellow;
      position: relative;
      left: 200px;
    }

效果图：

效果图