三栏布局

浮动float + calc()

先使用浮动将三栏水平排列，然后对中间栏使用calc()函数来计算去除左右两栏固定宽度后剩余的宽度。

<style>
    div{
        height: 100px;
    }
    .left{
        float: left;
        width: 200px;
        background-color: pink;
    }
    .middle{
        float: left;
        width: calc(100% - 400px);
        background-color: #e495e4;
    }
    .right{
        float: right;
        width: 200px;
        background-color: skyblue;
    }
</style>
<div class="contain">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

浮动float + margin 负值

利用浮动的方式，为左右两栏设置对应方向的浮动。中间一栏设置左右两个方向的margin负值。注意这种方式，中间一栏必须放到最后。

<style>
    div{
        height: 100px;
    }
    .left1{
        float: left;
        width: 200px;
        background-color: #2ad388;
    }
    .right1{
        float: right;
        width: 200px;
        background-color: #c3eb87;
    }
    .middle1{
        margin-left: 200px;
        margin-right: 200px;
        background-color: #e495ce;
    }
</style>
<div class="contain1">
    <div class="left1">left</div>
    <div class="right1">right</div>
    <div class="middle1">middle</div>
</div>

圣杯布局

利用浮动，外边距负值和相对定位来实现。

• 父级元素设置左右的padding，三列均设置向左浮动；
• 中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行；
• 再通过设置margin负值将其移动到上一行；
• 再利用相对定位，定位到两边。

注意：圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。

<style>
    .contain2{
        height: 100px;
        padding: 0 200px 0 200px;
        overflow: hidden;
    }
    .middle2,
    .left2,
    .right2{
        float: left;
        height: 100%;
    }
    .middle2{
        width: 100%;
        background-color: #e4b195;
    }
    .left2{
        position: relative;
        width: 200px;
        margin-left: -100%;
        left: -200px;
        background-color: #c2d32a;
    }
    .right2{
        position: relative;
        width: 200px;
        margin-right: -200px;
        background-color: #87ebe3;
    }
</style>
<div class="contain2">
    <div class="middle2">middle</div>
    <div class="left2">left</div>
    <div class="right2">right</div>
</div>

双飞翼布局

浮动 + 外边距负值

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。

<style>
    .contain3{
        height: 100px;
        overflow: hidden;
    }
    .middle3,
    .left3,
    .right3{
        float: left;
        height: 100%;
    }
    .middle3{
        width: 100%;
        background-color: #d0e495;
    }
    .inner{
        height: 100%;
        margin: 0 200px 0 200px;
    }
    .left3{
        width: 200px;
        margin-left: -100%;
        background-color: #2ab4d3;
    }
    .right3{
        width: 200px;
        margin-left: -200px;
        background-color: #eb87e9;
    }
</style>
<div class="contain3">
    <div class="middle3">
        <div class="inner">middle</div>
    </div>
    <div class="left3">left</div>
    <div class="right3">right</div>
</div>

定位position

利用绝对定位的方式。

好处：这种实现方式的三栏HTML结构可以任意摆放，不用考虑先后次序。

<style>
    .contain4 {
        position: relative;
    }
    .left4 {
        position: absolute;
        left: 0;
        width: 200px;
        background-color: red;
    }
    .middle4 {
        position: absolute;
        left: 200px;
        right: 200px;
        background-color: green;
    }
    .right4 {
        position: absolute;
        right: 0;
        width: 200px;
        background-color: blue;
    }
</style>
<div class="contain4">
    <div class="middle4">middle</div>
    <div class="left4">left</div>
    <div class="right4">right</div>
</div>

弹性布局 flex

利用flex布局的方式，左右两栏设置固定宽度，中间一栏设置为flex: 1;

好处：这种实现方式代码非常简洁。

<style>
    div {
        height: 200px;
    }
    .contain5 {
        display: flex;
    }
    .left5 {
        width: 200px;
        background-color: rgba(200, 0, 255, 0.58);
    }
    .middle5 {
        flex : 1;
        background-color: rgba(0, 21, 128, 0.4);
    }
    .right5 {
        width: 200px;
        background-color: rgba(26, 255, 0, 0.6);
    }
</style>
<div class="contain5">
    <div class="left5">left</div>
    <div class="middle5">middle</div>
    <div class="right5">right</div>
</div>

网格布局 grid

利用grid布局的方式，左右两栏设置固定宽度，中间一栏设置为auto。

好处：这种实现方式代码也非常简洁。

<style>
    div {
        height: 200px;
    }
    .contain6 {
        display: grid;
        /* 核心代码：左右两栏固定宽度，中间自适应宽度 */
        grid-template-columns: 200px auto 200px;
    }
    .left6 {
        background-color: rgba(255, 242, 0, 0.2);
    }
    .middle6 {
        background-color: rgba(0, 128, 60, 0.78);
    }
    .right6 {
        background-color: rgba(0, 255, 196, 0.37);
    }
</style>
<div class="contain6">
    <div class="left6">left</div>
    <div class="middle6">middle</div>
    <div class="right6">right</div>
</div>