这一次，彻底梳理各种布局问题

两栏布局

所谓的两栏布局指的是左边固定，右边自适应。

方法1：flat + margin-left

1. 父盒子设置为BFC：overflow:hidden
2. 左盒子固定宽度，右盒子margin-left

.father {
    overflow: hidden;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    background-color: red;
}
.right {
    margin-left: 210px;
    height: 200px;
    background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• codeSandBox

方法2：巧用flex: 1

1. 父盒子设置为flex布局
2. 左盒子固定宽度。
3. 右盒子设置为flex:1。

.father {
    display: flex;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    flex: 1;
    height: 200px;
    background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• codeSandBox

方法3：定位

1. 父盒子设置overflow:hidden+position: relative
2. 左盒子设置固定宽度
3. 右盒子设置为position: absolute + left: 左盒子的宽度 + top: 0

.father {
    overflow: hidden;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    position: absolute;
    height: 200px;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: pink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• codeSandBox

方法4：巧用calc函数

1. 父盒子overflow: hidden。
2. 左盒子：float: left，固定宽度。
3. 右盒子：float: left, 使用calc动态计算剩余宽度。

.father {
    overflow: hidden;
}
.left {
    float: left;
    height: 200px;
    width: 200px;
    background-color: blue;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 200px;
    background-color: pink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• codeSandBox

双飞翼布局(三栏布局)

所谓的双飞翼布局指的是左右固定，中间自适应。

方法1：两边使用float，中间使用margin

1. 给父盒子设置overflow: hidden。
2. 左盒子设置左浮动，右盒子设置右浮动。
3. 中间盒子设置margin-left和margin-right.

 .father {
    overflow: hidden;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    float: right;
    background-color: aqua;
}

.mid {
    height: 200px;
    margin-right: 220px;
    margin-left: 220px;
    background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• codeSandBox

方法2：父盒子flex布局+左右固定+中间宽度100%。

1. 父盒子设置为flex。
2. 左右盒子固定宽高。
3. 中间盒子宽度为100%。

.father {
    display: flex;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
}
.mid {
    width: 100%;
    margin: 0 20px;
    background-color: aqua;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• codeSandBox

方法3：左右绝对定位，中间margin

1. 父盒子相对定位，左右盒子都是绝对定位。
2. 左盒子定位靠左，右盒子定位靠右。
3. 中间盒子通过margin进行自适应。

.father {
    position: relative;
}
.left,
.right,
.mid {
    height: 200px;
}
.left {
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}
.right {
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: blue;
}
.mid {
    margin: 0 210px;
    background-color: aqua;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

• codeSandBox

参考文档

• 实现css两栏布局、右侧自适应、三栏布局中间自适应
• css布局篇——双栏布局与三栏布局
• 面试官：三栏布局你会几种？
• 实现三栏布局的7种方法
• 经典的左右两栏布局，有多少种实现方法？