PHP8.1.21版本已发布

vue8.1.21版本已发布

jquery8.1.21版本已发布

首页

课程

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

巴扎黑 原创: 2017-06-28 11:00:13 1976浏览

这篇文章主要为大家详细介绍了CSS实现等分布局的4种方式，等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下

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

思路一: float

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

【1】float + padding + background-clip

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

CSS Code复制内容到剪贴板

<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>

XML/HTML Code复制内容到剪贴板

1
2
3
4

【2】float + margin + calc

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

CSS Code复制内容到剪贴板

<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>

XML/HTML Code复制内容到剪贴板

1
2
3
4

【3】float + margin + (fix)

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

CSS Code复制内容到剪贴板

<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>

XML/HTML Code复制内容到剪贴板

1
2
3
4

思路二: inline-block

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

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

CSS Code复制内容到剪贴板

<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>

XML/HTML Code复制内容到剪贴板

1
2
3
4

【2】inline-block + margin + calc

CSS Code复制内容到剪贴板

<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>

XML/HTML Code复制内容到剪贴板

1
2
3
4

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

CSS Code复制内容到剪贴板

<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>

XML/HTML Code复制内容到剪贴板

1
2
3
4

思路三: table

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

【1】table + margin负值

CSS Code复制内容到剪贴板

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

XML/HTML Code复制内容到剪贴板

1
2
3
4

【2】table + 兄弟选择器

CSS Code复制内容到剪贴板

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

XML/HTML Code复制内容到剪贴板

1
2
3
4

思路四: flex

CSS Code复制内容到剪贴板

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

XML/HTML Code复制内容到剪贴板

1
2
3
4

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文链接：http://www.cnblogs.com/xiaohuochai/p/5456695.html

以上就是CSS实现等分布局的4种方式的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

上一条：CSS3教程：background-clip和background-origin 下一条：Android Layout 布局属性全解

查看更多

热门课程

PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

￥189
￥399

已抢24101个
抢
千万级数据并发解决方案（理论+实战）

￥229
￥299

已抢118637个
抢
通用后台管理系统实战开发（Thinkphp6+Layui）

￥89
￥99

已抢139746个
抢
go语言零基础开发内容管理系统

￥198
￥268

已抢6427个
抢
前后端分离的商城系统（Vue3+Laravel8+Uniapp）

￥1200
￥2400

已抢37810个
抢
UNI-APP开发(仿饿了么)

￥299
￥369

已抢67151个
抢

打开APP，随时随地在线学习！

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

相关文章

￥189

￥229

￥89

￥198

￥1200

￥299