三列布局几种经典实现方式-CSDN博客

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

三列布局，一般指两端固定宽度，中间宽度自适应的布局方式，这种布局应用还蛮广泛的，比如菜鸟编程：

实现方式大方向来看有差不多四种：

1、绝对定位

这可以算是最简单的一种了，关键点在于中间版块不给宽度，通过左右绝对定位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;
}
复制代码

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

两侧浮动很简单，只需要用到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;
}
复制代码

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

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

<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;
}
复制代码

完成后的布局如下：

4、通过特定布局实现，比如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
复制代码

朝闻道，夕死可矣