本文共 1247 字，大约阅读时间需要 4 分钟。

（1）利用内外间距相抵消，为父元素设置overflow:hidden;实现        每一列使用padding值撑开背景色；并且每一列使用padding撑开的多余的占位让margin负值抵消；        父级盒设置溢出隐藏        优点：结构简单，兼容所有浏览器        缺点：伪等高，需要合理控制margin和padding值        （2）利用内容撑开父元素的特点，为每一列添加对应的容器，进行相互嵌套，并在每个容器中添加背景颜色        三个嵌套的div负责背景，三列放在最内侧的div盒子中；        通过相对定位，分配三列的背景的位置；        通过margin负值，将内容移到对应的背景的位置；        父元素设置溢出隐藏        优缺点：扩展性好，可以实现自适应，结构嵌套复杂        （3）利用边框模拟背景，实现等高的显示效果        左、右边框颜色、内容背景分别负责三列的背景颜色；        通过margin值，同步列的位置        特点：扩展性差，三列+的布局不适用

示例

    
               
       
   
        
    
     左侧
    
        
    
     中间内容-利用内外间距相抵消
    
        
    
     右侧
    
    
   
    
       
   
        
    
            
     
                
      
                    
       
        左侧
       
                    
       
        中间内容-利用内容撑开父元素的特点
       
                    
       
        右侧
       
                
      
            
     
        
    
    
   
       
   
        
    
            
     
                
      
                    
       
        左侧
       
                    
       
        中间内容-使用百分比-方法同第二种
       
                    
       
        右侧
       
                
      
            
     
        
    
    
   
     
       
   
        
    
     左侧
    
        
    
     中间内容-利用边框模拟背景
    
        
    
     右侧
    
    
   

转载地址：https://jackiehao.blog.csdn.net/article/details/104400146 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！