实现CSS等分布局的4种方式 - 小火柴的蓝色理想

×

目录

[1]float [2]inline-block [3]table[4]flex

前面的话

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

思路一: float

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

【1】float + padding + background-clip

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

style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    margin-right: -20px;
    overflow: hidden;
}
.child{
    float: left;
    height: 100px;
    width: 25%;
    padding-right: 20px;
    box-sizing: border-box;
    background-clip: content-box;
}
style>

div class="parentWrap">
    div class="parent" style="background-color: lightgrey;">
        div class="child" style="background-color: lightblue;">1div>
        div class="child" style="background-color: lightgreen;">2div>
        div class="child" style="background-color: lightsalmon;">3div>
        div class="child" style="background-color: pink;">4div>                
    div>    
div>

【2】float + margin + calc

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

style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    overflow: hidden;
    margin-right: -20px;
}
.child{
    float: left;
    height: 100px;
    width: calc(25% - 20px);
    margin-right: 20px;
}
style>

div class="parentWrap">
    div class="parent" style="background-color: lightgrey;">
        div class="child" style="background-color: lightblue;">1div>
        div class="child" style="background-color: lightgreen;">2div>
        div class="child" style="background-color: lightsalmon;">3div>
        div class="child" style="background-color: pink;">4div>                
    div>    
div>

【3】float + margin + (fix)

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

style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    overflow: hidden;
    margin-right: -20px;
}
.child{
    float: left;
    width: 25%;
}
.in{
    margin-right: 20px;
    height: 100px;
}
style>

div class="parentWrap">
    div class="parent" style="background-color: lightgrey;">
        div class="child" style="background-color: blue;">
            div class="in" style="background-color: lightblue;">1div>
        div>
        div class="child" style="background-color: green;">
            div class="in" style="background-color: lightgreen;">2div>
        div>
        div class="child" style="background-color: orange;">
            div class="in" style="background-color: lightsalmon;">3div>
        div>
        div class="child" style="background-color: red;">
            div class="in" style="background-color: pink;">4div>
        div>                
    div>    
div>

思路二: inline-block

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

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

style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    font-size: 0;
    margin-right: -20px;
    overflow: hidden;
}
.child{
    display:inline-block;
    vertical-align: top;
    width: 25%;
    padding-right: 20px;
    box-sizing: border-box;
    background-clip: content-box;
    font-size: 16px;
}
style>

div class="parentWrap">
    div class="parent" style="background-color: lightgrey;">
        div class="child" style="background-color: lightblue;">1div>
        div class="child" style="background-color: lightgreen;">2div>
        div class="child" style="background-color: lightsalmon;">3div>
        div class="child" style="background-color: pink;">4div>                
    div>    
div>

【2】inline-block + margin + calc

style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    margin-right: -20px;
    font-size: 0;
}
.child{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    height: 100px;
    width: calc(25% - 20px);
    margin-right: 20px;
}
style>

div class="parentWrap">
    div class="parent" style="background-color: lightgrey;">
        div class="child" style="background-color: lightblue;">1div>
        div class="child" style="background-color: lightgreen;">2div>
        div class="child" style="background-color: lightsalmon;">3div>
        div class="child" style="background-color: pink;">4div>                
    div>    
div>

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

style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    margin-right: -20px;
    font-size: 0;
}
.child{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    width: 25%;
}
.in{
    margin-right: 20px;
    height: 100px;
}
style>

div class="parentWrap">
    div class="parent" style="background-color: lightgrey;">
        div class="child" style="background-color: blue;">
            div class="in" style="background-color: lightblue;">1div>
        div>
        div class="child" style="background-color: green;">
            div class="in" style="background-color: lightgreen;">2div>
        div>
        div class="child" style="background-color: orange;">
            div class="in" style="background-color: lightsalmon;">3div>
        div>
        div class="child" style="background-color: red;">
            div class="in" style="background-color: pink;">4div>
        div>                
    div>    
div>

思路三: table

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

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

【1】table + margin负值

style>
body,p{margin: 0;}
.parentWrap{
    overflow: hidden;
}
.parent{
    display: table;
    width: calc(100% + 20px);
    table-layout: fixed;
}
.child{
    display: table-cell;
    padding-right: 20px;
}
.in{
    height: 100px;
}
style>

div class="parentWrap">
    div class="parent" style="background-color: lightgrey;">
        div class="child" style="background-color: blue;">
            div class="in" style="background-color: lightblue;">1div>
        div>
        div class="child" style="background-color: green;">
            div class="in" style="background-color: lightgreen;">2div>
        div>
        div class="child" style="background-color: orange;">
            div class="in" style="background-color: lightsalmon;">3div>
        div>
        div class="child" style="background-color: red;">
            div class="in" style="background-color: pink;">4div>
        div>                
    div>    
div>

【2】table + 兄弟选择器

style>
body,p{margin: 0;}
.parent{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.child{
    display: table-cell;
}
.child + .child{
    padding-left: 20px;
}
.in{
    height: 100px;
}
style>

div class="parent" style="background-color: lightgrey;">
    div class="child" style="background-color: blue;">
        div class="in" style="background-color: lightblue;">1div>
    div>
    div class="child" style="background-color: green;">
        div class="in" style="background-color: lightgreen;">2div>
    div>
    div class="child" style="background-color: orange;">
        div class="in" style="background-color: lightsalmon;">3div>
    div>
    div class="child" style="background-color: red;">
        div class="in" style="background-color: pink;">4div>
    div>                
div>    

思路四: flex

style>
body,p{margin: 0;}
.parent{
    display: flex;
}
.child{
    flex:1;
    height: 100px;
}
.child + .child{
    margin-left: 20px;
}
style>

div class="parent" style="background-color: lightgrey;">
    div class="child" style="background-color: lightblue;">1div>
    div class="child"
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• 实现CSS等分布局的4种方式 - 小火柴的蓝色理想

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02

网友评论

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

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• html中怎么清除li黑点
• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html的name和value是什么意思
• html如何给背景图片设置透明度
• html中怎么让列表横向排列
• html5怎么创建跳转页尾超链接
• 十分钟搞懂form标签中的GET和POST提交方式

• 404 not found是什么意思
• DOM是什么意思
• url是什么意思？
• 如何改变图片大小
• html是什么
• html如何创建电子邮件链接
• HTML编辑器有哪些？最好用的4款HTML编辑器推荐
• 如何制作一个简单的HTML登录页面（附代码）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

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

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作