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

前面的話

　　等分布局是指子元素平均分配父元素寬度的布局方式，本文將介紹實現等分布局的5種方式

 

float 

【思路一】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

【思路二】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

　　缺點：元素被設置為table后，內容撐開寬度。若要兼容IE7-瀏覽器，需要改為<table>結構。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;">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>

 

flex

【思路四】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;">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>    

 

grid

【思路五】grid

<style>
body,p{margin: 0;}
.parent{
    display: grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:20px;
    height: 100px;
}
</style>

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