持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

在开发后台管理系统的时候，经常需要绘制左中右三列布局，其中左右宽度固定，中间宽度自动撑开，实现的方式有很多种，我们一起看看吧~

一：float布局

使用float属性，左边div左浮动，右边div右浮动。中间div设置左右margin

html代码

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

css代码

.left {
    width: 300px;
    float: left;
}
.right {
    width: 300px;
    float: right;
}
.middle {
    margin-left: 300px;
    margin-right: 300px;
}

二：定位布局

使用定位，左边div左上定位，右边div右上定位，中间div设置左右margin

html代码

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

css代码

.left {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.right {
    width: 300px;
    height: 500px;
    position: absolute;;
    top: 0;
    right: 0;
}
.middle {
    margin-left: 300px;
    margin-right: 300px;
    height: 500px;
}

三、双飞翼布局

双飞翼是在中间元素的内部又设置了一个div元素，通过设置这个内部div元素的margin来实现

html代码

<div class="left">左</div>
<div class="middle">
    <div class="center"></div>
</div>
<div class="right">右</div>

css代码

.left {
    width: 300px;
    float: left;
    margin-left: -100%;
}
.right {
    width:300px;
    float: left;
    margin-left: -300px;
}
.middle {
    width: 100%;
    float: left;
}
.center {
    margin-left: 300px;
    margin-right: 300px;
}

四、圣杯布局

圣杯和双飞翼的实现大致一样，不同之处在于圣杯布局是通过设置padding来达到效果，注意点是html顺序要把中间的元素放第一个

html代码

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

css代码

body{
    padding: 0 300px 0 300px;
}
.left {
    width: 300px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
}
.right {
    width:300px;
    float: left;
    position: relative;
    left: 300px;
}
.middle {
    width: 100%;
    float: left;
}

五、flex布局

flex布局是最简单的方式，设置中间区域的属性flex:1

html代码

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

css代码

body{
   display: flex;
}
.left {
    width: 300px;
}
.right {
    width:300px;
}
.middle {
   flex: 1;
}

六、网格布局

网格布局是通过使用属性：grid-template-columns来设置每一个列的宽度来实现

html代码

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

css代码

body{
   display: grid; 
   grid-template-columns: 300px auto 300px;
}

七、表格布局

表格布局是设置外层元素的display: table，内部元素的display: table-cell来实现

html代码

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

css代码

body {
    display: table;
    width: 100%;
}
body > div{
    display: table-cell;
    height: 100px;
}
.left{
    width: 300px;
}
.right{
    width: 300px;
}