三列布局几种经典实现方式

今天咱们来总结一下经典的三列布局的实现。

三列布局，通常指两端固定宽度，中间宽度自适应的布局方式，这种布局应用还蛮普遍的，好比菜鸟编程：

实现方式大方向来看有差很少四种：

一、绝对定位

这能够算是最简单的一种了，关键点在于中间版块不给宽度，经过左右绝对定位left和right实现自适应,话很少说直接上代码

.container {
    width: 500px;
    height: 800px;
    background-color: #eee;
    margin: 0 auto;
    position: relative;
    border: 2px solid #333;
}

.left {
    position: absolute;
    left: 0;
    width: 100px;
    height: 800px;
    background-color: green;
}

.right {
    position: absolute;
    right: 0;
    width: 200px;
    height: 800px;
    background-color: blue;
}

.middle {
    position: absolute;
    left: 100px;
    right: 200px;
    height: 800px;
    background-color: red;
}
复制代码

二、两侧浮动+中间自动撑开

两侧浮动很简单，只须要用到float便可。

.left {
    width: 100px;
    height: 800px;
    background: green;
    float: left;
}

.right {
    width: 150px;
    height: 800px;
    background: blue;
    float: right;
}
复制代码

中间自适应的方式有不少，能够经过display:block实现，也能够经过calc()计算出宽度，或者给左右固定margin等方式实现

.middle {
    height: 800px;
    background: red;
    display: block;
}
复制代码

三、圣杯布局和双飞翼布局

挺有意思的名称，看一下下面这段代码：

<div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
复制代码

.middle {
    width: 100%;
    height: 100%;
    background: red;
    float: left;
}

.left {
    width: 100px;
    height: 100%;
    background: green;
    margin-left: -100%;
    float: left;
}

.right {
    width: 150px;
    height: 100%;
    background: blue;
    margin-left: -150px;
    float: left;
}
复制代码

效果如图：

圣杯布局和双飞翼布局在这里的思路都是同样的，经过三栏float和负margin达到三列并列效果。不一样的地方在于处理中间板块被遮挡的方法。

先来看一看圣杯布局： 给最外层左右padding等于左右板块的宽度，再经过相对定位把左右板块往两边拉

.container{
    padding: 0 150px 0 100px;
}
.left{
    position: relative;
    left: -100px;
}
.right{
    position: relative;
    right: -150px;
}
复制代码

而双飞翼布局则是经过内层加margin的方式，让内层元素恰好定位到露出部分

<div class="container">
    <div class="middle">
        <div class="inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
复制代码

.inner {
    margin: 0 150px 0 100px;
}
复制代码

完成后的布局以下：

四、经过特定布局实现，好比flex/grid/table布局

这些特殊布局这里就不特意贴代码了，均可以实现三列布局。

如下是引用小火柴的蓝色理想博客中的一段话:

不管是什么布局方式，无外乎须要应用float、inline-block、table、absolute、flex、grid这6种布局属性，
而后再配合负margin、calc()函数、bfc、增长结构等来实现布局

自适应包括两种状况：一种是宽度由内容撑开，一种是宽度自动撑满父元素剩余宽度
可实现宽度由内容撑开的属性有： float、inline、inline-block、table、table-cell、absolute、fixed、flex、grid
可实现宽度自动撑满父元素剩余宽度的属性有： overflow(配合float)、table、flex、grid
复制代码

---

朝闻道，夕死可矣