思路一: float

 

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

【1】float + padding + background-clip

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

float:left; + padding-right:20px; + background-clip:content-box; + box-sizing:border-box;

 

【2】float + margin + calc

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

width: calc(25% - 20px);**注意：calc使用时运算符两边有空格

float:left; + margin-right:20px; + width:calc(25% - 20px);

【3】float + margin + (fix)

通过在子元素中增加结构，为添加结构设置margin实现等分布局间距

思路二: inline-block

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

font-size: 0; 用来处理换行符解析成空格的间隙问题；

相当于思路一的float换成子元素中的inline-block + vertical-align:top;要在父元素中添加font-size: 0;

 

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

【2】inline-block + margin + calc

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

 

思路三: table

 

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

【1】table + margin负值  子元素内部增加结构实现间距

父元素width:calc(100% + 20px); display: table;  table-layout: fixed;   子元素display: table-cell;

【2】table + 兄弟选择器  子元素内部增加结构实现间距

父元素width: 100%; display: table;  table-layout: fixed;   子元素display: table-cell;

.child + .child{   

     padding-left: 20px;   

}  

思路四: flex

display: flex;火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，比较适合移动端开发使用

1. <style>   
2. body,p{margin: 0;}   
3. .parent{   
4.     display: flex;   
5. }   
6. .child{   
7.     flex:1;   
8.     height: 100px;   
9. }   
10. .child + .child{   
11.     margin-left: 20px;   
12. }   
13. </style>  

1. <div class="parent" style="lightgrey;">  
2.     <div class="child" style="lightblue;">1</div>  
3.     <div class="child" style="lightgreen;">2</div>  
4.     <div class="child" style="lightsalmon;">3</div>  
5.     <div class="child" style="pink;">4</div>                   
6. </div>