CSS三栏布局实现方法总结

所谓三栏布局指的是：两边固定，中间内容自适应。三栏布局在开发中经常见到，效果如图所示：

三栏布局效果

红色和蓝色部分宽度固定，中间宽度自适应。下面我们用不同的方法实现上面的效果。

1.浮动解决方案

  
  
  


   
    

        
        

            

            

            

                
浮动解决方案
                1.这是三栏布局浮动布局的中间部分
            
        
    

实现原理：两边使用float固定在左右两侧，留出中间的空白。

优点：结构清晰，实现较为简单，兼容性好。

缺点：

1. 主体内容无法最先加载，当页面内容较多时，影响用户体验。
2. 浮动会脱离文档流，必要时候，需要清除浮动，如果处理不好的话，页面布局会出现问题。

兼容性：所有主流浏览器都支持

2.绝对定位解决方案

  
  
  


   
    

        
        

            

            

                
绝对定位解决方案
                2.这是三栏布局绝对定位布局的中间部分
            
            

        
    

优点：结构简单，快捷，好处理

缺点：使用了绝对定位布局，脱离文档流，下面所有的子元素必须脱离文档流，可使用性差。

兼容性：所有主流浏览器都支持

3.flexbox布局解决方案

  
  
  


   
    

        
        

            

            

                
flex解决方案
                3.这是三栏布局flex布局的中间部分
            
            

        
    
  

原理：

优点：

1. 结构简单直观
2. 可以结合flex的其他功能实现更多效果，例如使用order属性调整显示顺序，让主题内容优先加载，但展示在中间

缺点：需要IE10以上支持，会产生高度自适应的问题，因为flex分配完剩余空间之后，默认高度会使外层div的高度，比如中间的div撑开高度之后，两边的div也会随着外部div高度的变化而变化

兼容性：如下图所示：

flexbox兼容性

4.表格布局

  
  
  


   
    

        
        

            

            

                
table布局解决方案
                4.这是三栏布局table布局的中间部分
            
            

        
    

原理：

1. 外层通过display:table设置表格
2. 内层的左中右通过display:table-cell设置为表格单元
3. 左右设置固定宽度，中间设置width:100%填充剩下的宽度

优点：

1. 结构简单直观
2. table作为一个整体结构兼容性好，相比多个div浮动组合更加稳定

缺点：内层元素展示为table-cell，margin会失效，只能在left-center-right为所有元素设置间隔，或内部增加一层来设置margin

5.网格布局解决方案

  
  
  


    
    

        
        

            

            

                
网格布局解决方案
                5.这是三栏布局网格布局的中间部分
            
            

        
    

原理：通过给父容器设置display:grid;创建一个网格容器，使用grid-template-columns 和 grid-template-rows属性设置网格的列与 行的大小
优点：结构简单
兼容性：Grid兼容性
需要下载的童鞋可以移步到：CSS三栏布局的不同实现方法，欢迎Star

版权归作者所有，如有转载，请注明来源