实现CSS等分布局的4种方式_html/css_WEB-ITnose
× 目录 [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;">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
缺点：需要设置垂直对齐方式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后，内容撑开宽度。若要兼容IE7-浏览器，需要改为
