本文由云+社区发表

作者：前端林子

本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果

1.方法一：自身浮动的方法

实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

	
    			
    	
    	
    
     左栏
    
	
    
     右栏
    
	
    
     中间栏
    

注意：该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

实现的效果如下：

自身浮动实现三栏布局

2.方法二：margin负值法

实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度

	
    			
    	
    
     中间栏
    
	
    
     左栏
    
	
    
     右栏
    

注意：该方法在html布局时，要把中间栏放在第一个

此方法是实现圣杯布局和双飞翼布局的基础。

实现的效果如下：

margin负值法实现三栏布局

3.方法三：绝对定位法

实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离

	
    			
    	
    	
    
     左栏
    
	
    
     中间栏
    
	
    
     右栏
    

实现的效果如下：

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们