兩列布局中單列定寬單列自適應佈局的6種思路

前面的話

　　提及自適應佈局方式，單列定寬單列自適應佈局是最基本的佈局形式。本文將從float、inline-block、table、absolute、flex和grid這六種思路來詳細說明如何巧妙地實現佈局

 

float

【思路一】float

　　提及兩列布局，最多見的就是使用float來實現。float浮動佈局的缺點是浮動後會形成文本環繞等效果，以及須要及時清除浮動。若是各浮動元素的高度不一樣時，可能會出犬牙交錯的效果

【1】float + margin

　　將定寬的一列使用float，而自適應的一列使用計算後的margin

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;}    
.right{margin-left: 120px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

　　[缺點1]IE6-瀏覽器下3像素bug，具體表如今右側首行文字會向右偏移3px。解決辦法是在left元素上設置margin-right: -100px

　　[缺點2]當右側容器中有元素清除浮動時，會使該元素不與左側浮動元素同行，從而出現文字下沉現象

【2】float + margin + (fix)

　　(fix)表明增長結構，爲了解決上述方法中的兩個缺點，能夠經過增長結構來實現。自適應的一列外側增長一層結構.rightWrap並設置浮動。要實現自適應效果，.rightWrap寬度必須設置爲100%。若不設置，float後的元素寬度將由內容撐開。同時再配合盒模型屬性的計算，設置計算後的負margin值，使兩列元素在同一行顯示。同時兩列之間的間距由.right的margin值肯定。因爲右側元素會層疊在左側元素之上，.left須要使用relative來提高層級

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{position: relative;float: left;width: 100px;}    
.rightWrap{float: left;width: 100%;margin-left: -100px;}
.right{margin-left: 120px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="rightWrap" style="background-color: pink;">
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>
</div>

【3】float + margin + calc

　　除了增長結構的方法外，還可使用calc()

　　[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加減運算

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;margin-right: 20px;}    
.right{float: left;width: calc(100% - 120px);}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

【4】float + overflow

　　還可使用overflow屬性來觸發bfc，來阻止浮動形成的文字環繞效果。因爲使用overflow不會改變元素的寬度屬性，因此不須要從新設置寬度。因爲設置overflow:hidden並不會觸發IE6-瀏覽器的haslayout屬性，因此須要設置zoom:1來兼容IE6-瀏覽器

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{ float: left;width: 100px;margin-right: 20px;}    
.right{overflow: hidden;zoom: 1;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

 

inline-block

【思路二】inline-block

　　inline-block內聯塊佈局的主要缺點是須要設置垂直對齊方式vertical-align，則須要處理換行符解析成空格的間隙問題。IE7-瀏覽器不支持給塊級元素設置inline-block屬性，兼容代碼是display:inline;zoom:1;

【1】inline-block + margin + calc

　　通常來講，要解決inline-block元素之間的間隙問題，要在父級設置font-size爲0，而後在子元素中將font-size設置爲默認大小

　　[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加減運算 

<style>
p{margin: 0;}
.parent{font-size: 0;}
.left{display:inline-block;vertical-align:top;width:100px;margin-right:20px;font-size:16px;}
.right{display:inline-block;vertical-align:top;width:calc(100% - 120px);font-size:16px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

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

<style>
p{margin: 0;}
.parent{font-size: 0;}
.left{position:relative;display:inline-block;vertical-align:top;width:100px;font-size:16px;}
.rightWrap{display:inline-block;vertical-align:top;width:100%;margin-left: -100px;font-size:16px;}
.right{margin-left: 120px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="rightWrap" style="background-color: pink;">
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>
</div>

 

table

【思路三】table

　　使用table佈局的缺點是元素被設置爲table後，內容撐開寬度，因此須要設置width:100%。若要兼容IE7-瀏覽器，須要改成<table>結構。因爲table-cell元素沒法設置margin，若須要在元素間設置間距，須要增長結構

<style>
p{margin: 0;}
.parent{display:table;width: 100%;table-layout: fixed;}
.left,.rightWrap{display:table-cell;}
.left{width: 100px;}
.right{margin-left: 20px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="rightWrap" style="background-color: pink;">
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>    
</div>

 

absolute

【思路四】absolute

　　absolute佈局的缺點是因爲父元素須要設置爲relative，且子元素設置爲absolute，因此父元素的高度並非由子元素撐開的，須要單獨設置。

　　[注意]IE6-不支持相對的偏移屬性同時設置

<style>
p{margin: 0;}
.parent{position: relative;width:100%;height:40px;}
.left{position: absolute;left:0;width:100px;}
.right{position: absolute;left:120px;right:0;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

 

flex

【思路五】flex

　　flex彈性盒模型是很是強大的佈局方式。但因爲其性能消耗較大，適合於局部小範圍的佈局

　　[注意]IE9-瀏覽器不支持

<style>
p{margin: 0;}
.parent{display: flex;}
.left{width:100px;margin-right: 20px;}
.right{flex:1;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

 

grid

【思路六】: 使用柵格佈局grid實現

　　[注意]IE10-瀏覽器不支持

<style>
p{margin: 0;}
.parent{display: grid;grid-template-columns: 100px 1fr;grid-gap:20px}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>