前言
在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高。
两栏布局
两栏布局实现效果是将页面分割成左右宽度不登的两列,宽度较小的列设置为固定高度,剩余宽度由另一列撑满,比如 Ant Design 文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器。
这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器
这种布局适用于内容上具有明显主次关系的网页。
三栏布局
三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之
大家最常见的就是github：
双栏布局
双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在
实现思路也非常的简单：
- 使用
float左浮左边栏 - 右边模块使用
margin-left撑出内容块做内容展示 - 为父级元素添加 BFC ，防止下方元素飞到上方内容
代码如下：
1 <style>
2 .box{
3 overflow: hidden;
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弹性布局
1 <style>
2 .box{
3 display: flex;
4 }
5 .left {
6 width: 100px;
7 background-color: pink;
8 }
9 .right {
10 flex: 1;
11 background-color: aquamarine;
12 }
13 </style>
14 <div class="box">
15 <div class="left">左边</div>
16 <div class="right">右边</div>
17 </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;
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弹性布局一样的简单