实现三栏布局的7种方法

前言

需求：实现左右两栏固定宽度，中间一栏自适应宽度。

以下是总结的7种方法可以实现这个需求。

1. 浮动float + calc()

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

HTML结构：

<div class="container">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>

CSS样式：

div {
    height: 100px;
}
.left {
    float: left;
    width: 200px;
    background-color: red;
}
.middle {
    float: left;
    width: calc(100% - 400px);
    background-color: green;
}
.right {
    float: right;
    width: 200px;
    background-color: blue;
}

2. 浮动float + margin 负值

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

<div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间</div>
</div>

CSS样式：

div {
    height: 100px;
}
.left {
    float: left;
    width: 200px;
    background-color: red;
}
.right {
    float: right;
    width: 200px;
    background-color: blue;
}
.middle {
    margin-left: 200px;
    margin-right: 200px;
    background-color: green;
}

3. 圣杯布局

核心思想：利用浮动，外边距负值和相对定位来实现。

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

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

HTML结构：

<div class="container">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

CSS样式：

.container {
    height: 100px;
    padding: 0 200px 0 200px;
    overflow: hidden;
}
.middle,
.left,
.right {
    float: left;
    height: 100%;
}
.middle {
    width: 100%;
    background: green;
}
.left {
    position: relative;
    width: 200px;
    margin-left: -100%;
    left: -200px;
    background: red;
}
.right {
    position: relative;
    width: 200px;
    margin-right: -200px;
    background: blue;
}

4. 双飞翼布局

核心思想：浮动 + 外边距负值

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

HTML结构

<div class="container">
    <div class="middle">
        <div class="inner">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

CSS样式

.container {
    height: 100px;
    overflow: hidden;
}
.middle,
.left,
.right {
    float: left;
    height: 100%;
}
.middle {
    width: 100%;
    background-color: green;
}
.inner {
    height: 100%;
    margin: 0 200px 0 200px;
}
.left {
    width: 200px;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 200px;
    margin-left: -200px;
    background-color: blue;
}

5. 定位position

核心思想：利用绝对定位的方式。

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

HTML结构

<div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间</div>
</div>

CSS样式

.container {
    position: relative;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: red;
}
.middle {
    position: absolute;
    left: 200px;
    right: 200px;
    background-color: green;
}
.right {
    position: absolute;
    right: 0;
    width: 200px;
    background-color: blue;
}

6. 弹性布局 flex

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

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

HTML结构

<div class="container">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>

CSS样式

div {
    height: 100px;
}
.container {
    display: flex;
}
.left {
    width: 200px;
    background: red;
}
.middle {
    flex: 1;
    background: green;
}
.right {
    background: blue;
    width: 200px;
}

7. 网格布局 grid

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

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

HTML结构

<div class="container">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>

CSS样式

div {
    height: 100px;
}
.container {
    display: grid;
    /* 核心代码：左右两栏固定宽度，中间自适应宽度 */
    grid-template-columns: 200px auto 200px;
}
.left {
    background: red;
}
.middle {
    background: green;
}
.right {
    background: blue;
}

结尾

如有问题，请指正我修改。欢迎评论交流！！！觉得不错请给个赞👍吧😁