一、背景

在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高

两栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，

比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器

这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器

这种布局适用于内容上具有明显主次关系的网页

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

大家最常见的就是github：

二、双栏布局

双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单：

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

代码如下：

复制
1<style>
2    .box{
3        overflow: hidden; 添加BFC
4    }
5    .left {
6        float: left;
7        width: 200px;
8        background-color: gray;
9        height: 400px;
10    }
11    .right {
12        margin-left: 210px;
13        background-color: lightgray;
14        height: 200px;
15    }
16</style>
17<div class="box">
18    <div class="left">左边</div>
19    <div class="right">右边</div>
20</div>

还有一种更为简单的使用则是采取：flex弹性布局

flex弹性布局

复制
1<style>
2    .box{
3        display: flex;
4    }
5    .left {
6        width: 100px;
7    }
8    .right {
9        flex: 1;
10    }
11</style>
12<div class="box">
13    <div class="left">左边</div>
14    <div class="right">右边</div>
15</div>

flex可以说是最好的方案了，代码少，使用简单

注意的是，flex容器的一个默认属性值:align-items: stretch;

这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start

三、三栏布局

实现三栏布局中间自适应的布局方式有：

• 两边使用 float，中间使用 margin
• 两边使用 absolute，中间使用 margin
• 两边使用 float 和负 margin
• display: table 实现
• flex实现
• grid网格布局

两边使用 float，中间使用 margin

需要将中间的内容放在html结构最后，否则右侧会臣在中间内容的下方

实现代码如下：

复制
1<style>
2    .wrap {
3        background: #eee;
4        overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
5        padding: 20px;
6        height: 200px;
7    }
8    .left {
9        width: 200px;
10        height: 200px;
11        float: left;
12        background: coral;
13    }
14    .right {
15        width: 120px;
16        height: 200px;
17        float: right;
18        background: lightblue;
19    }
20    .middle {
21        margin-left: 220px;
22        height: 200px;
23        background: lightpink;
24        margin-right: 140px;
25    }
26</style>
27<div class="wrap">
28    <div class="left">左侧</div>
29    <div class="right">右侧</div>
30    <div class="middle">中间</div>
31</div>

原理如下：

• 两边固定宽度，中间宽度自适应。
• 利用中间元素的margin值控制两边的间距
• 宽度小于左右部分宽度之和时，右侧部分会被挤下去

这种实现方式存在缺陷：

• 主体内容是最后加载的。

• 右边在主体内容之前，如果是响应式设计，不能简单的换行展示

两边使用 absolute，中间使用 margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

复制
1<style>
2  .container {
3    position: relative;
4  }
5  
6  .left,
7  .right,
8  .main {
9    height: 200px;
10    line-height: 200px;
11    text-align: center;
12  }
13
14  .left {
15    position: absolute;
16    top: 0;
17    left: 0;
18    width: 100px;
19    background: green;
20  }
21
22  .right {
23    position: absolute;
24    top: 0;
25    right: 0;
26    width: 100px;
27    background: green;
28  }
29
30  .main {
31    margin: 0 110px;
32    background: black;
33    color: white;
34  }
35</style>
36
37<div class="container">
38  <div class="left">左边固定宽度</div>
39  <div class="right">右边固定宽度</div>
40  <div class="main">中间自适应</div>
41</div>

实现流程：

• 左右两边使用绝对定位，固定在两侧。
• 中间占满一行，但通过 margin和左右两边留出10px的间隔

两边使用 float 和负 margin

复制
1<style>
2  .left,
3  .right,
4  .main {
5    height: 200px;
6    line-height: 200px;
7    text-align: center;
8  }
9
10  .main-wrapper {
11    float: left;
12    width: 100%;
13  }
14
15  .main {
16    margin: 0 110px;
17    background: black;
18    color: white;
19  }
20
21  .left,
22  .right {
23    float: left;
24    width: 100px;
25    margin-left: -100%;
26    background: green;
27  }
28
29  .right {
30    margin-left: -100px; /* 同自身宽度 */
31  }
32</style>
33
34<div class="main-wrapper">
35  <div class="main">中间自适应</div>
36</div>
37<div class="left">左边固定宽度</div>
38<div class="right">右边固定宽度</div>

实现过程：

• 中间使用了双层标签，外层是浮动的，以便左中右能在同一行展示

• 左边通过使用负 margin-left:-100%，相当于中间的宽度，所以向上偏移到左侧

• 右边通过使用负 margin-left:-100px，相当于自身宽度，所以向上偏移到最右侧

缺点：

• 增加了 .main-wrapper 一层，结构变复杂
• 使用负 margin，调试也相对麻烦

使用 display: table 实现

<table> 标签用于展示行列数据，不适合用于布局。但是可以使用 display: table 来实现布局的效果

复制
1<style>
2  .container {
3    height: 200px;
4    line-height: 200px;
5    text-align: center;
6    display: table;
7    table-layout: fixed;
8    width: 100%;
9  }
10
11  .left,
12  .right,
13  .main {
14    display: table-cell;
15  }
16
17  .left,
18  .right {
19    width: 100px;
20    background: green;
21  }
22
23  .main {
24    background: black;
25    color: white;
26    width: 100%;
27  }
28</style>
29
30<div class="container">
31  <div class="left">左边固定宽度</div>
32  <div class="main">中间自适应</div>
33  <div class="right">右边固定宽度</div>
34</div>

实现原理：

• 层通过 display: table设置为表格，设置 table-layout: fixed`表示列宽自身宽度决定，而不是自动计算。
• 内层的左中右通过 display: table-cell设置为表格单元。
• 左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度

使用flex实现

利用flex弹性布局，可以简单实现中间自适应

代码如下：

复制
1<style type="text/css">
2    .wrap {
3        display: flex;
4        justify-content: space-between;
5    }
6
7    .left,
8    .right,
9    .middle {
10        height: 100px;
11    }
12
13    .left {
14        width: 200px;
15        background: coral;
16    }
17
18    .right {
19        width: 120px;
20        background: lightblue;
21    }
22
23    .middle {
24        background: #555;
25        width: 100%;
26        margin: 0 20px;
27    }
28</style>
29<div class="wrap">
30    <div class="left">左侧</div>
31    <div class="middle">中间</div>
32    <div class="right">右侧</div>
33</div>

实现过程：

• 仅需将容器设置为display:flex;，
• 盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
• 盒内元素的高度撑开容器的高度

优点：

• 结构简单直观
• 可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间

grid网格布局

代码如下：

复制
1<style>
2    .wrap {
3        display: grid;
4        width: 100%;
5        grid-template-columns: 300px auto 300px;
6    }
7
8    .left,
9    .right,
10    .middle {
11        height: 100px;
12    }
13
14    .left {
15        background: coral;
16    }
17
18    .right {
19        width: 300px;
20        background: lightblue;
21    }
22
23    .middle {
24        background: #555;
25    }
26</style>
27<div class="wrap">
28    <div class="left">左侧</div>
29    <div class="middle">中间</div>
30    <div class="right">右侧</div>
31</div>

跟flex弹性布局一样的简单