实现CSS等分布局的5种方式

最新推荐文章于 2024-04-03 18:02:23 发布
最新推荐文章于 2024-04-03 18:02:23 发布
阅读量279 收藏
点赞数
分类专栏： 前端 文章标签： css总结
原文链接：https://www.mk2048.com/blog/blog.php?id=hibcbiacckaa&title=%E5%AE%9E%E7%8E%B0CSS%E7%AD%89%E5%88%86%E5%B8%83%E5%B1%80%E7%9A%845%E7%A7%8D%E6%96%B9%E5%BC%8F
版权

前面的话

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

 

float 

【思路一】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;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;">4</div>                
    </div>    
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d1.html" frameborder="0" width="320" height="240">

【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;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;">4</div>                
    </div>    
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d2.html" frameborder="0" width="320" height="240">

【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;">1</div>
        </div>
        <div class="child" style="background-color: green;">
            <div class="in" style="background-color: lightgreen;">2</div>
        </div>
        <div class="child" style="background-color: orange;">
            <div class="in" style="background-color: lightsalmon;">3</div>
        </div>
        <div class="child" style="background-color: red;">
            <div class="in" style="background-color: pink;">4</div>
        </div>                
    </div>    
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d3.html" frameborder="0" width="320" height="240">

 

inline-block

【思路二】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;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;">4</div>                
    </div>    
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d4.html" frameborder="0" width="320" height="240">

【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;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;">4</div>                
    </div>    
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d5.html" frameborder="0" width="320" height="240">

【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;">1</div>
        </div>
        <div class="child" style="background-color: green;">
            <div class="in" style="background-color: lightgreen;">2</div>
        </div>
        <div class="child" style="background-color: orange;">
            <div class="in" style="background-color: lightsalmon;">3</div>
        </div>
        <div class="child" style="background-color: red;">
            <div class="in" style="background-color: pink;">4</div>
        </div>                
    </div>    
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d6.html" frameborder="0" width="320" height="240">

 

table

【思路三】table

　　缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为<table>结构。table-cell元素无法设置margin，设置padding及background-clip也不可行

<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;">1</div>
        </div>
        <div class="child" style="background-color: green;">
            <div class="in" style="background-color: lightgreen;">2</div>
        </div>
        <div class="child" style="background-color: orange;">
            <div class="in" style="background-color: lightsalmon;">3</div>
        </div>
        <div class="child" style="background-color: red;">
            <div class="in" style="background-color: pink;">4</div>
        </div>                
    </div>    
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d7.html" frameborder="0" width="320" height="240">

 

flex

【思路四】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;">1</div>
    <div class="child" style="background-color: lightgreen;">2</div>
    <div class="child" style="background-color: lightsalmon;">3</div>
    <div class="child" style="background-color: pink;">4</div>                
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d8.html" frameborder="0" width="320" height="240">

 

grid

【思路五】grid

<style>
body,p{margin: 0;}
.parent{
    display: grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:20px;
    height: 100px;
}
</style>
<div class="parent" style="background-color: lightgrey;">
    <div class="child" style="background-color: lightblue;">1</div>
    <div class="child" style="background-color: lightgreen;">2</div>
    <div class="child" style="background-color: lightsalmon;">3</div>
    <div class="child" style="background-color: pink;">4</div>                
</div>

style="width: 100%; height: 120px;" src="https://demo.xiaohuochai.site/css/dengfen/d99.html" frameborder="0" width="320" height="240">

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_29069777
关注
专栏目录
CSS等高布局的6种方式
黄沙百战穿金甲，不破楼兰终不还。
05-04 1万+
前面的话 　　等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局   伪等高 边框模拟 　　因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两
CSS实现等分布局的4种方式
09-27
主要为大家详细介绍了CSS实现等分布局的4种方式，等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下
CSS布局自适应等分比例实践
hyb1234hi的专栏
08-08 670
CSS等比例划分，在CSS布局中是比较重要的，下面分享几种常用方法和探讨一下兼容性。 一：浮动布局+百分比 emmet html代码：ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容} .float-ul{width: 100%; overflow: hidden; zoom: 1;} .float-ul li{float: left; width: 2
CSS等分布局的几种方式
qq_36800701的博客
10-09 290
参考博客： https://www.cnblogs.com/xiaohuochai/p/5456695.html
CSS布局之等分布局与等高布局
weixin_47471015的博客
01-12 938
等分布局 等分布局就是指一行被分为若干列，每一列的宽度是相同的值； 方法一：float 属性实现等分布局效果 给各个元素设置浮动和宽度 { float: left; width: 25%; //宽度用百分比等分 //给每个元素设置浮动-- 子元素浮动 - 导致父元素的高度塌陷 } 清除浮动 1.固定的高度 height 固定写死（不推荐） 2.父元素加overflow:hidden => BFC 特点: 把浮动的高度给计算进去 优点：代码简洁 缺点：
CSS布局——水平垂直居中、等分布局、圣杯布局
静Yu的博客
10-24 1966
信息时代，互联网是一个重要的信息传播载体。网页成为人们查找资源，获取信息，发布信息，学习交流的重要平台。现今世界，也是一个各项技术都飞速发展的时代。网页的设计制作依傍于互联网而生，并且风格设计在不断更新。因此，对网页的设计要求也不断提高，尤其是在创新的社会背景下网页设计的新理念和新方法，不断推陈出新。CSS对网页的布局是网页体系中的重中之重，本文基于此背景，阐述CSS+DIV技术在网页布局方面的应用。
css实现等分布局
chengxue_123的博客
11-12 659
css画页面的时候，喜欢使用百分比实现等分布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl.
css页面中常见左中右分栏布局的两种实现方式
09-25
首先，第一种实现方式是使用了HTML和CSS，通过绝对定位（position: absolute）来布局分栏。在这个方法中，页面被分成了三个主要部分：头部（#nav）、主体（#main）和底部（#foot）。头部和底部是整个页面的顶部和...
用CSS3实现瀑布流布局的示例代码
09-24
瀑布流布局是一种常用的网页布局方式，可以实现图片或者内容块像瀑布一样错落有致地排列，特别适合用于展示图片画廊、产品列表、博客文章等场景。在传统的瀑布流布局实现中，通常需要使用JavaScript来控制布局，这种...
bootstrap五等分代码CSS和圆形按钮css
04-27
bootstrap五等分代码CSS和圆形按钮css，讲文档添加到bootstrap.css的最后直接写class即可。非常好用
css3全屏分割布局网页模板
12-13
这是一款非常实用的css3全屏分割布局网页模板。该网页布局将页面垂直分为两个部分，当点击了其中一部分的图片时，该部分会放大到全屏显示。
【CSS】flex 实现三栏等分布局
leo的博客
04-12 4734
flex 实现三栏等分布局
CSS布局——水平垂直居中、等分布局，web前端开发师学习
最新发布
2401_84002730的博客
04-03 1003
等分布局就是将一行分为多列，每一列的宽度是相同的。即用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景。中间的部分是三栏中高度最高的部分。实现圣杯布局效果也可以采用flex布局，就是一个大盒子包含三个子盒子，左右两个盒子固定宽高，中间盒子设置flex：1（占据大盒子剩余空间）。本行分为四列，所以宽度为25%，padding-right是设置一个元素的右填充在此填充了10px，即每个子元素之间的空隙。5，两栏布局，左边固定，右边自适应，左右不重叠。
温习古文之生于忧患，死于安乐
Sunny_Future的博客
12-06 261
人恒过，然后能改；困于心，衡于虑，而后作；征于色，发于声，而后喻。入则无法家拂士，出则无敌国外患者，国恒亡。然后知生于忧患而死于安乐也。
CSS布局解决方案——等分布局（定宽+自适应+两块高度一样高）
qq_39082301的博客
04-22 2114
方案一：使用float方案二：使用table方案三：使用flex方案四：使用display
纯css3饼图五等分
wangweiscsdn的博客
07-30 4553
HTML代码如下： pie 良好 优秀 未提交 需努力 加油 98% 得分率 css代码如下：
五等分样式
weixin_30498921的博客
02-05 293
.col-xs-1-5 { width: 20%; float: left; } .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: rela...
CSS实现等分布局的4种方式，css等分布局4种
Rita_jing的博客
03-29 5319
思路一: float 缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差 【1】float + padding + background-clip 使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景 float:left; + padding-right:20px; + background-
CSS等分布局：4种实现方法解析
本文主要介绍了使用CSS实现等分布局的四种方法，这些方法适用于让子元素平均占据父元素的宽度，以创建平衡的界面布局。 思路一：使用float属性 在传统的布局技术中，float常被用来实现等分布局。但这种方法的一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值