2017-05-08

三栏布局

三栏布局方案

左边和右边固定宽度，中间自适应

圣杯布局

中间的div放在最前面最先渲染，三栏全部左浮动，包裹div设置左右外边距为左右两栏的宽度，中间栏宽度100%，左右两栏通过负值的左外边距和相对定位调整到正确位置。

<div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
.container{
    margin: 0 200px 0 100px; 父元素设置左右外边距留出左右两栏的位置
}
.middle{
    float: left; 左浮动
    width: 100%; 中间栏宽度设为100%，实现自适应
    height: 200px;
    background: red;
}
.left{
    width: 100px;
    height: 200px;
    background: green;
    float: left;  左栏左浮动
    margin-left: -100%; 因中间栏宽度100%，所以左栏会被挤到下一行，因此设置负的左外边距为父元素的宽度即-100%，置于中间栏左边
    position: relative; 左栏会覆盖中间栏的前面部分，因此设置相对定位，向左移动自身宽度的大小
    left: -100px;
}
.right{
    width: 200px;
    height:200px;
    background: blue;
    float: left; 右栏左浮动
    margin-left: -200px; 因中间栏宽度100%，所以右栏会被挤到下一行，因此设置负的左外边距为自身宽度，置于中间栏右边
    position: relative; 右栏会覆盖中间栏的后面部分，因此设置相对定位，向右移动自身宽度的大小
    right: -200px;
}

当页面宽度缩小至中间栏的宽度小于左侧栏的宽度时，左右两侧会被挤到下一行，布局错乱。

双飞翼布局

与圣杯布局大致相同，不同的地方是双飞翼布局不涉及到三栏的包裹div，但是中间div里面需要一个content div来存放内容，且设置外边距为左右两栏的宽度。左右两栏只需设置负值的左外边距，不需要再设置相对定位。

<div class="middle">
    <div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
.middle{
    float: left;
    width: 100%; 宽度设为100%
    height: 200px;
}
.content{
    height: 200px;
    margin: 0 200px 0 100px;
    background: red;
}
.left{
    width: 100px;
    height: 200px;
    background: green;
    float: left;
    margin-left: -100%;
}
.right{
    width: 200px;
    height:200px;
    background: blue;
    float: left;
    margin-left: -200px;
}

圣杯布局 VS 双飞翼布局

两者的实现思路其实本质是相同的，不同之处就是处理“左右两栏遮住中间栏”问题的解决方案，圣杯布局是通过三栏的父元素div设置左右margin留出左右两栏的位置，所以middle div设置宽度为100%之后是不包括父元素的margin部分的，因此左右两栏设置了负值的左外边距调整位置后其实是位于父元素的content区域的边缘，需要设置相对定位移动本身宽度的大小到左右两边的留白处。而双飞翼布局中是在middle div中添加了一个content div，通过设置这个content div的margin来留出左右两栏的位置。而这两处留白是在middle div内部，左右两栏通过负值的左外边距调整好位置之后恰好是处于留白处，因此不需要再通过相对定位调整位置。其实不设置content div标签，而设置middle div的padding来留出左右两栏的位置也是可以的，但是此时要设置middle div的box-sizing: border-box;。

绝对定位

左右两侧绝对定位，中间设置margin为左右两栏的宽度,三栏的标签位置可以任意调整

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
.middle{
    margin: 0 200px 0 100px;
    height: 200px;
    background: red;
}
.left{
    width: 100px;
    height: 200px;
    background: green;
    position: absolute;
    left: 0;
    top: 0;
}
.right{
    width: 200px;
    height:200px;
    background: blue;
    position: absolute;
    right: 0;
    top: 0;
}

左右浮动

左栏向左浮动，右栏向右浮动，中间栏设置margin左右外边距，中间栏必须放在最后

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
.middle{
    margin: 0 200px 0 100px;
    height: 200px;
    background: red;
}
.left{
    width: 100px;
    height: 200px;
    background: green;
    float: left;
}
.right{
    width: 200px;
    height:200px;
    background: blue;
    float: right;
}

flex布局

<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
.container{
    display: flex;
}
.middle{
    flex: 1;
    height: 200px;
    background: red;
}
.left{
    width: 100px;
    height: 200px;
    background: green;
}
.right{
    width: 200px;
    height:200px;
    background: blue;
}

参考:
圣杯布局和双飞翼布局的理解和区别
 圣杯布局和双飞翼布局（前端面试必看）
我熟知的三种三栏网页宽度自适应布局方法

本文标题:三栏布局

文章作者:小蕾蕾

发布时间:2017年05月08日 - 14时14分

最后更新:2018年04月28日 - 11时02分

原始链接:http://wanglei-0707.github.io/2017/05/08/三栏布局/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。