css之圣杯布局

昨天面试的时候被问到圣杯布局，之前知道怎么实现三栏布局，但是突然问到圣杯布局，当时我就凭着感觉说了两种方法，因为之前自己没有实现过，面试完之后赶紧写了demo来验证一下。

圣杯布局是什么

• 三列布局，中间宽度自适应，两边定宽；
• 中间栏要在浏览器中优先展示渲染；

是不是比三栏布局多了点要求呢，嘿嘿

实现

HTML代码如下：

    
middle
    
left
    
right

实现一：使用浮动

• 先给左右列固定宽度，然后给中间列的宽设为100%，都设置为向左浮动：

#middle {
    background-color: lightpink;
    height: 300px;
    width: 100%;
    float: left;
}

#left {
    background-color: red;
    height: 300px;
    width: 100px;
    float: left;
}

#right {
    background-color: aqua;
    height: 300px;
    width: 100px;
    float: left;
}

此时它的效果为：

• 让左右列与中间列显示在一行
  给#left设置margin-left: -100%;，给#right设置margin-left: -100px;，那么此时我的页面显示为：

但是有没有发现我的 middle这个字不见了，那是因为被压住了，此时我的左右列覆盖到了中间列上面

• 中间盒子自适应
  那么想让中间盒子自适应，就给我们的父元素加padding值：

#container {
    padding: 0 100px;
}

此时的效果为：

与上面的图相比，两边多了空，那么此时我的 middle还是没有出现，所以说明我的左右两列还是压着中间那列的，所以我们就应该将左右两列给加定位，然后让他们分别向左右移动：

#left {
    position: relative;
    left: -100px;
}
#right {
    position: relative;
    right: -100px;
}

此时我们的圣杯布局就完成啦：

实现二：用flex布局

使用flex布局就简单多了呢，代码如下：

#middle {
    background-color: lightpink;
    height: 300px;
    display: flex;
    flex:1;/*简写，1,1，auto的意思*/
}

#left {
    background-color: red;
    height: 300px;
    flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/
    order:-1;/*设置left的位置在middle之前*/
}

#right {
    background-color: aqua;
    height: 300px;
    flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/
}

#container{
    display: flex;
    flex:1;/*简写，1,1，auto的意思*/
}

那么我们的圣杯布局也就完成啦：