CSS實現等分布局的4種方式

思路一: 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- 前綴寫法，比較適合移動端開發使用

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