实现三栏布局的十种方式

本文节选自我的博客：实现三栏布局的十种方式

• 💖 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
• 📝 CSDN主页：爱吃糖的猫🔥
• 📣 我的博客：爱吃糖的猫
• 📚 Github主页: MilesChen
• 🎉 支持我：点赞👍+收藏⭐️+留言📝
• 💬介绍：The mixture of WEB+DeepLearning+Iot+anything🍁

前言

实现三栏布局也是一道经典的面试题，如果你能侃侃而谈这十种实现三栏布局的方式，一定会令面试官眼前一亮。三栏布局即左右固定中间伸缩，将三栏布局的方式按照中间栏的渲染顺序可以分为三种：float实现的三种（中间栏最后渲染），flex、grid、绝对定位实现的三种（中间栏中间渲染），双飞翼圣杯实现的四种（中间栏最后渲染）

float实现的三种

float实现的方式优点是兼容性好；缺点是需要将中间栏放在最后渲染，网速慢的情况下可能会影响用户体验。

float+BFC

	
		
		
		
		
	
	
		

			
左栏
			
右栏
            
中间栏
		
	

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
27
28
29
30
31
32
33
34

float+margin

	
		
		
		
		
	
	
		

			
左栏
			
右栏
            
中间栏
		
	

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
27
28
29
30
31
32
33
34

float+calc()

	
		
		
		
		
	
	
		

			
左栏
			
右栏
			
中间栏
		
	

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
27
28
29
30
31
32
33
34
35
36

flex、grid、绝对定位实现的三种

这三种方式都是将中间栏放在中间渲染。

flex

	
		
		
		
		
	
	
		

			
左栏
            
中间栏
			
右栏
		
	

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
27
28
29
30
31
32
33
34
35
36
37

grid

	
		
		
		
		
	
	
		

			
左栏
            
中间栏
			
右栏
		
	

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
27
28
29
30
31
32
33
34
35

绝对定位

	
		
		
		
		
	
	
		

			
左栏
            
中间栏
			
右栏
		
	


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40

双飞翼圣杯实现的四种

这四种方式都是将中间栏放在最前面渲染，保证中间栏最先渲染。

felx实现圣杯双飞翼效果

	
		
		
		
		
	
	
		

			
左栏
			
右栏
            
中间栏
		
	

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
27
28
29
30
31
32
33
34
35

圣杯布局

    
    
    
    


    

        
middle
        
left
        
right
    


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

注意：圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。
父级padding+子绝父相+负边距：三栏都使用float：left；父级标签padding: 0 200px; ，结合下面这张图理解

将left和right使用子绝父相，再调整定位的方式弄上去
左边：margin-left: -100%;（切换到上一行起始位置）left: -200px;（相对定位，向左移动200px）
右边：margin-left: -200px;（向左移动一个身位，移动到middle的右侧）left:200px; （向右移动200px）
还有种方法也能挤上去：margin-right: -200px；

双飞翼布局

    
    
    
    


    

        

            
中间
        
        
左边
        
右边
    


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

中间栏的子标签margin+左右负边距：三栏都使用float：left；中间栏子标签margin: 0 200px; HTML中将中间栏放前面；结合下面这张图去理解

双飞翼圣杯复合写法

    
    
    
    


    

        
middle
        
left
        
right
    


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

中间标签内减模式padding+负数边距：三栏都使用float：left；中间栏标签padding: 0 200px; 且要设置box-sizing: border-box;左边：margin-left: -100%;右边：margin-left: -200px;

总结

1. float+BFC：左右两栏float到左右；中间 overflow: hidden; 清除浮动显示第二栏 ；注意：HTML需要将中间块放在right之后；
2. float+margin：左右两栏float到左右；中间设置margin-left和margin-right；注意：HTML需要将中间块放在right之后；
3. float+calc() ：先使用浮动将三栏水平排列，然后对中间栏使用calc(100% - 400px);来计算去除左右两栏宽度后剩余的宽度；
4. flex；将中间设定值为1，最简单的方式；
5. grid：display: grid;grid-template-columns: 200px auto 200px;左右两栏固定宽度，中间自适应宽度；
6. 子绝父相：三栏全部绝对定位；中间栏left: 200px;right: 200px;保持伸缩居中
7. felx实现圣杯双飞翼效果：left {order: -1;} right{order: 1;} 中间块默认为0；所以显示顺序了-1、0、1；
8. 圣杯布局：父级padding+子绝父相+负边距；
9. 双飞翼布局：中间栏的子标签margin+左右负边距；
10. 双飞翼圣杯复合写法：中间标签内减模式padding+负数边距。

---

感谢小伙伴们的耐心观看，本文为笔者个人学习记录，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！