CSS三列布局-小火柴的蓝色理想

来源：动视网责编：小采时间：2020-11-27 16:44:13

CSS三列布局-小火柴的蓝色理想

CSS三列布局-小火柴的蓝色理想:× 目录两侧定宽中间自适应两列定宽一侧自适应中间定宽两侧自适应一侧定宽两列自适应三列自适应总结前面的话前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两

推荐度：

点击下载本文 文档为doc格式

导读CSS三列布局-小火柴的蓝色理想:× 目录两侧定宽中间自适应两列定宽一侧自适应中间定宽两侧自适应一侧定宽两列自适应三列自适应总结前面的话前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两

前面的话

　　前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况

两侧定宽中间自适应布局

思路一: float

【1】float + margin + calc


 
 left
  
 
 center
 center
  
 
 right

【2】float + margin + (fix)


 
 left
  
 
 
 center
 center
  
 
 
 right

思路二: inline-block

【1】inline-block + margin + calc


 
 left
  
 
 center
 center
  
 
 right

【2】inline-block + margin + (fix)


 
 left
  
 
 
 center
 center
  
  
 
 right

思路三: table


 
 left

  
 
 
 center
 center
  
  
 
 right

思路四: absolute


 
 left
  
 
 center
 center
  
 
 right

思路五: flex


 
 left
  
 
 center
 center
  
 
 right

两列定宽一侧自适应布局

　　这种布局与单列定宽单列自适应布局非常相似

思路一: float

【1】float + margin

　　缺点是IE6-浏览器的3px的bug，以及当自适应列中有元素清除浮动时，会使该元素不与左侧浮动元素同行，从而出现文字下沉现象


 
 left
  
 
 center
  
 
 right
 right

【2】float + margin + calc


 
 left
  
 
 center
  
 
 right
 right

【3】float + margin + (fix)










    



    
         
            产品服务
            发展历程
            企业资讯
            企业文化
            关于我们
            加入我们
            联系我们
            网站导航
            网站律师
        
        
            
                 
                     
             
             
                 
                     
             
             
                 
                     
             
             
                 
                     
             
             
                 
                     中国扫黄打非网
                 
             
        
         
            
            Copyright © 2019-2025 51dongshi.net 版权所有
            
                赣ICP备2023002352号-34
            
            违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
            
        
    




Top