三栏自适应布局的7种实现方式

前言：

三栏布局其中包含左中右三栏，左边列和右边列的宽度都是固定的，中间列的宽度是自适应的。

我们经常会在商城里面见到，像之前的淘宝网、现如今很多博客网站等都会用到，三栏自适应布局就是下面示例图中的样式：

注意：下面使用的vw、vh是css尺寸单位，表示viewportWidth、viewportHeight视口的宽高，规定宽高分别为100份，例如：20vw = 20% viewportWidth

---

1、float浮动布局

首先是定义结构，这里需要注意的是right右侧的盒子需要放到中间盒子的前面，否则如果将右侧盒子放到最后会导致右侧布局掉下来，大家多注意一点

<div class="containerFloat">
    <!-- 注意右浮动的盒子要放到中间盒子的前面，center必须放到最后 否则右侧布局会掉下来 -->
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">1</div>
</div>
<style>
    .left {
        float: left;
        background-color: #ed1f13;
        width: 20vw;
        height: 20vh;
    }
    .right {
        float: right;
        background-color: #0096f8;
        width: 20vw;
        height: 20vh;
    }
    .center {
        background-color: #55d535;
        height: 20vh;
        margin: 0 20vw;
    }
</style>

2、float浮动布局升级版

将 margin: 0 20vw 替换成 overflow: hidden，这样会让元素形成BFC，就不用给内容区域设置margin了，原理就是让中间内容区形成BFC

<div class="containerFloat">
    <!-- 注意右浮动的盒子要放到中间盒子的前面，center必须放到最后 否则右侧布局会掉下来 -->
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">1</div>
</div>
<style>
    .left {
        float: left;
        background-color: #ed1f13;
        width: 20vw;
        height: 20vh;
    }
    .right {
        float: right;
        background-color: #0096f8;
        width: 20vw;
        height: 20vh;
    }
    .center {
        background-color: #55d535;
        height: 20vh;
        /* overflow: hidden触发主元素的BFC，使得主元素环绕着浮动的元素 */
        overflow: hidden;
    }
</style>

3、定位实现

给父元素开启相对定位，然后给左右块添加绝对定位，分别设置left和right为0，让二者分别靠左右布局，中间块设置margin后会自动在两个定位块的中间渲染，同样需要把中间块放到最后

<div class="containerPosition">
    <div id="Pleft"></div>
    <!-- 这里仍需要将右边盒子放到中间盒子的前面，否则会被中间盒子挤下去 -->
    <div id="Pright"></div>
    <div id="Pbody"></div>
</div>
<style>
    .containerPosition {
        position: relative;
    }
    .Pleft {
        position: absolute;
        left: 0;
        background-color: #ed1f13;
        width: 20vw;
        height: 20vh;
    }
    .Pright {
        position: absolute;
        right: 0;
        background-color: #0096f8;
        width: 20vw;
        height: 20vh;
    }
    .Pbody {
        background-color: #55d535;
        height: 20vh;
        margin: 0 20vw;
    }
</style>

 4、flex弹性盒实现

flex正常按照顺序布局就可以，原理是使用flex开启弹性盒布局，给左右块设置好宽度的情况下，给中间块指定flex:1 就会让它自适应宽度 否则不指定宽度不显示

<div class="containerFlex">
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
</div>
<style>
    .containerFlex{
        display: flex;
    }
    #left {
        background-color: #ed1f13;
        width: 20vw;
        height: 20vh;
    }
    #main {
        /* 给中间块添加flex:1 就会让它自适应宽度 否则不指定宽度不显示 */
        flex: 1;
        background-color: #55d535;
        height: 20vh;
    }
    #right {
        background-color: #0096f8;
        width: 20vw;
        height: 20vh;
    }
</style>

5、table实现

开启table布局，三块栏设置table-cell 三块就会平分屏幕宽度 没有table-cell的元素不显示，同时给左右table-cell同时设置width宽度，可以自定义宽度，不设置宽度就是平分宽度

<div class="containerTable">
    <div id="Tleft"></div>
    <div id="Tbody"></div>
    <div id="Tright"></div>
</div>
<style>
    .containerTable{
        display: table;
        width: 100%;
    }
    /* 三块栏设置table-cell 三块就会平分屏幕宽度 没有table-cell的元素不显示
    此时给左右table-cell同时设置width宽度，可以自定义宽度 */
    .Tleft {
        display: table-cell;
        background-color: #ed1f13;
        width: 20vw;
        height: 20vh;
    }
    .Tbody {
        display: table-cell;
        background-color: #55d535;
        height: 20vh;
        margin: 0 20.5vw;
    }
    .Tright {
        display: table-cell;
        background-color: #0096f8;
        width: 20vw;
        height: 20vh;
    }
</style>

6、圣杯布局实现

圣杯布局是以中间块为核心，所以需要将中间块放在HTML的第一行

1. 首先三块都设置为左浮动并给左右块设置具体宽度
2. 中间块宽度设置为100%并且设置margin-left和margin-right，用于给左右侧留取空间，但是此时左右块被挤压到下部【浮动布局中main占100%，后面的浮动布局会被挤到下一行】。
3. 设置左块的margin-left为-100%，右侧块margin-left为-20vw，让左右块回到第一行最左侧和最右侧
4. 给左右块设置相对定位，设置left和right-20vw，使其回到到中间块的两侧，从而实现圣杯布局三栏布局

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
    .container {
        margin: 0 20vw;
    }
    .main {
        float: left;
        background-color: #55d535;
        height: 20vh;
        width: 100%;
    }
    .left {
        float: left;
        background-color: #ed1f13;
        height: 20vh;
        width: 20vw;
        margin-left: -100%;
        position: relative;
        left: -20vw;
    }
    .right {
        float: left;
        background-color: #0096f8;
        height: 20vh;
        width: 20vw;
        margin-left: -20vw;
        position: relative;
        right: -20vw;
    }
</style>

7、双飞翼布局

双飞翼布局和圣杯布局很类似，都是以中间块为核心，然后不同的是此时没有设置父容器container的左右外边距【可以直接去掉container容器】同时没有使用相对定位去使得左右块定位到左右两侧

由于没有container容器以及样式，所以两边的20vw的margin值是没有的，这样就导致中间盒子被两边盒子给遮挡，此时我们将main盒子外边包一个父元素，将外边的父元素设置左浮动，并且设置宽度100%，然后在main中间盒子设置左右margin为20px即可，其他与圣杯式大致一样

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<style>
    .content {
        float: left;
        width: 100%;
    }
    .main {
        background-color: #55d535;
        height: 20vh;
        margin: 0 20vw;
    }
    .left {
        float: left;
        background-color: #ed1f13;
        height: 20vh;
        width: 20vw;
        margin-left: -100%;
    }
    .right {
        float: left;
        background-color: #0096f8;
        height: 20vh;
        width: 20vw;
        margin-left: -20vw;
    }
</style>