欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

实现CSS等分布局的4种方式_html/css_WEB-ITnose

程序员文章站 2024-01-23 22:33:28
...
× 目录 [1]float [2]inline-block [3]table [4]flex

前面的话

　　等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式

思路一: float

　　缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差

【1】float + padding + background-clip

　　使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景

    
        
1
        
2
        
3
        
4

【2】float + margin + calc

　　使用margin实现子元素之间的间距，使用calc()函数计算子元素的宽度

    
        
1
        
2
        
3
        
4

【3】float + margin + (fix)

　　使用margin实现子元素之间的间距，通过增加结构来实现兼容

    
        
            
1
        
        
            
2
        
        
            
3
        
        
            
4

思路二: inline-block

　　缺点：需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

【1】inline-block + padding + background-clip

    
        
1
        
2
        
3
        
4

【2】inline-block + margin + calc

    
        
1
        
2
        
3
        
4

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

    
        
            
1
        
        
            
2
        
        
            
3
        
        
            
4

思路三: table

　　缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为

结构。table-cell元素无法设置margin，设置padding及background-clip也不可行

【1】table + margin负值

    
        
            
1
        
        
            
2
        
        
            
3
        
        
            
4

【2】table + 兄弟选择器

    
        
1
    
    
        
2
    
    
        
3
    
    
        
4

思路四: flex

    
1
    
2
    
3
    
4
实现CSS等分布局的4种方式_html/css_WEB-ITnose

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • 实现CSS等分布局的4种方式_html/css_WEB-ITnose

    • 专题推荐

    作者信息
    实现CSS等分布局的4种方式_html/css_WEB-ITnose

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • 实现CSS等分布局的4种方式_html/css_WEB-ITnosejavascript初级视频教程
  • 实现CSS等分布局的4种方式_html/css_WEB-ITnosejquery 基础视频教程
    • 视频教程分类

    ：公益在线php培训，帮助PHP学习者快速成长！

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1实现CSS等分布局的4种方式_html/css_WEB-ITnose关于我们免责申明赞助与捐赠广告合作

    实现CSS等分布局的4种方式_html/css_WEB-ITnose   实现CSS等分布局的4种方式_html/css_WEB-ITnose
    相关标签： 实现CSS等分布局的4种方式

    上一篇： thinkphp 数据库连接解决思路

    下一篇：

    推荐阅读