实现两栏布局的五种方式

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

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

前言

实现两栏布局也是一道经典的面试题，两栏布局即左边固定右边伸缩，要实现两栏布局的方式超过十种了，下面举例五种，用来抛砖引玉。

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

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

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

左侧绝对定位

    
        
        
        
        
        
    
    
		

			
左侧
			
右侧
		
    

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

总结

1. float+BFC：第一栏float:left; overflow: hidden; 清除浮动显示第二栏
2. float+margin：第一栏float:left；给第二栏设置margin-left
3. flex：将第二栏flex设置为1
4. 左边绝对定位：第一栏绝地定位；第二栏margin-left
5. 右边绝对定位：第二栏绝对定位：left为第一栏的宽度；top: 0;left: 200px;right: 0;bottom: 0;

还有其他方式，比如 grid 、float+calc 、table+calc 就不一一举例了。

---

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