实现CSS等分布局的5种方式
前面的话
等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的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>
【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>
【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>
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>
【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>
【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>
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>
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>
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>
好的代码像粥一样,都是用时间熬出来的
![二维码](https://pic.xiaohuochai.site/blog/qrcode.jpg)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战