CSS实现三栏布局的5种方案

1. 实现效果

一共三栏，左中右，左右分别在页面的左右侧，中间部分充满剩余的宽度。

2. 实现方案

1. 浮动布局

注意，中间的盒子，需要写在最下面。左右盒子分别设置左浮动、右浮动。

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

.left {
    float: left;
    width: 100px;
    background: red;
}

.center {
    background: green;
}

.right {
    float: right;
    width: 100px;
    background: blue;
}

2. table布局

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

.box {
    width: 100%;
    display: table;
    height: 100px;
}

.left {
    display: table-cell;
    width: 100px;
    background: red;
}

.center {
    display: table-cell;
    background: green;
}

.right {
    display: table-cell;
    width: 100px;
    background: blue;
}

3. 定位布局

父盒子相对定位，子盒子绝对定位。

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

.box {
    position: relative;
}

.left {
    position: absolute;
    left: 0px;
    width: 100px;
    background: red;
}

.center {
    position: absolute;
    left: 100px;
    right: 100px;
    background: green;
}

.right {
    position: absolute;
    right: 0px;
    width: 100px;
    background: blue;
}

4. flex布局

父盒子设置为flex容器，左右盒子定宽，中间盒子占满剩余空间。

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

.box {
    display: flex;
}

.left {
    width: 100px;
    background: red;
}

.center {
    flex: 1;
    background: green;
}

.right {
    width: 100px;
    background: blue;
}

5. grid布局

只需两行核心代码即可。

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</div>

.box {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
}

.left {
    background: red;
}

.center {
    background: green;
}

.right {
    background: blue;
}