实现CSS等分布局的4种方式 - 小火柴的蓝色理想
前面的话
等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的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-浏览器,需要改为 【1】table + margin负值 【2】table + 兄弟选择器 声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。 相关文章 相关视频 全栈 170W+ 主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门 入门 80W+ 主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门 实战 120W+ 主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习结构。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;">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>
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"
专题推荐
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论