实现三栏布局的7种方法

2,449 阅读3分钟

前言

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

以下是总结的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;
}

结尾

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