css中三栏布局之两边宽度固定，中间宽度自适应-5种方法总结——flex布局、浮动布局、绝对定位布局、圣杯布局、双飞翼布局

css中三栏布局之两边宽度固定，中间宽度自适应-5种方法总结——flex布局、浮动布局、绝对定位布局、圣杯布局、双飞翼布局

方法一：使用flex布局，是最简便的。

为中间区域的父盒子添加dispaly：flex，将该布局变为flex布局。

flex-direction：row表示布局的排列方式为按行排列。

flex：1表示来分配剩余空间，用来表示占多少份数

效果

代码

<div class="layout">
    <header>#header</header>
    <div class="container">
        <div class="left">#left</div>
        <div class="center">#center</div>
        <div class="right">#right</div>
    </div>
    <footer>#footer</footer>
</div>

<style>
    .container {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 500px;
    }

    .container .left {
        width: 200px;
        background-color: skyblue;
    }

    .container .center {
        height: 100%;
        flex: 1;
        background-color: rgb(186, 206, 223);
    }

    .container .right {
        width: 200px;
        background-color: darkgray;
    }
</style>

方法二：使用浮动来实现

使用浮动来实现，左边盒子左浮动，右边盒子右浮动，中间的盒子自适应。

注意：这里需要注意的是html部分，必须将中间的盒子放到最后，因为左边盒子左浮动，中间盒子若在中间，会自动占满整行，右边盒子会换行。只有确定了左右浮动，再将中间盒子自适应插入。

效果

代码

<div class="container">
    <div class="left">#left</div>
    <div class="right">#right</div>
    <div class="center">#center</div>
</div>

<style>
    .container {
        width: 100%;
        height: 500px;
    }

    .container .left {
        width: 200px;
        height: 500px;
        float: left;
        background-color: skyblue;
    }

    .container .center {
        height: 500px;
        background-color: rgb(186, 206, 223);
    }

    .container .right {
        width: 200px;
        height: 500px;
        background-color: darkgray;
        float: right;
    }
</style>

方法三：使用绝对定位来实现

给父盒子设置相对定位，子盒子设置绝对定位，都依据父盒子来进行偏移。左边盒子上左偏移量为0，右边盒子上右偏移量为0，中间盒子自适应，和方法二中的浮动类似。但是html布局文件不用更改。

效果-同2

代码

<div class="container">
    <div class="left">#left</div>
    <div class="right">#right</div>
    <div class="center">#center</div>
</div>

<style>
    .container {
        width: 100%;
        height: 500px;
        position: relative;
    }

    .container .left {
        width: 200px;
        height: 500px;
        background-color: skyblue;
        position: absolute;
        top: 0;
        left: 0;
    }

    .container .center {
        height: 500px;
        background-color: rgb(186, 206, 223);
    }

    .container .right {
        width: 200px;
        height: 500px;
        background-color: darkgray;
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

方法四：圣杯布局

父盒子padding+三个盒子浮动+左右盒子相对定位并负边距。

布局这里要注意：中间盒子结构放在最前边

效果

代码

<header>#header</header>
<div class="container">
    <div class="center">#center</div>
    <div class="left">#left</div>
    <div class="right">#right</div>
</div>
<footer>#footer</footer>

<style>
    header {
        background-color: grey;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .container {
        height: 500px;
        padding-left: 200px;
        padding-right: 300px;

    }

    .left {
        height: 100%;
        width: 200px;
        background-color: skyblue;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .center {
        width: 100%;
        height: 100%;
        background-color: rgb(186, 206, 223);
    }

    .right {
        width: 300px;
        height: 100%;
        background-color: darkgray;
        margin-left: -300px;
        position: relative;
        right: -300px;
    }

    .left,
    .center,
    .right {
        text-align: center;
        line-height: 500px;
        float: left;
    }

    footer {
        width: 100%;
        height: 50px;
        background-color: rgb(109, 108, 108);
        line-height: 50px;
        text-align: center;
        clear: both;
    }
</style>

方法五：双飞翼布局

三个盒子浮动+中间盒子左右margin留位+左右负边距。

注意：

中间盒子外边要套个盒子，若只是给中间盒子设置外边距，会撑大整个盒子的宽度，影响布局。

效果

代码

<div class="container">
    <div class="wrapper">
        <div class="center">#center</div>
    </div>
    <div class="left">#left</div>
    <div class="right">#right</div>
</div>

<style>
    .container {
        height: 500px;
    }

    .left {
        height: 100%;
        width: 200px;
        background-color: skyblue;
        margin-left: -100%;
    }

    .wrapper {
        width: 100%;
        height: 100%;
        background-color: rgb(186, 206, 223);
    }

    .center {
        height: 100%;
        margin-left: 200px;
        margin-right: 300px;
    }

    .right {
        width: 300px;
        height: 100%;
        background-color: darkgray;
        margin-left: -300px;
    }

    .left,
    .wrapper,
    .right {
        text-align: center;
        line-height: 500px;
        float: left;
    }
</style>