兩列布局中單列定寬單列自適應(yīng)布局的5種思路

思路一: float

　　說起兩列布局，最常見的就是使用float來實(shí)現(xiàn)。float浮動布局的缺點(diǎn)是浮動后會造成文本環(huán)繞等效果，以及需要及時(shí)清除浮動。如果各浮動元素的高度不同時(shí)，可能會出犬牙交錯(cuò)的效果

【1】float + margin

　　將定寬的一列使用float，而自適應(yīng)的一列使用計(jì)算后的margin

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

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div></div>

　　[缺點(diǎn)1]IE6-瀏覽器下3像素bug，具體表現(xiàn)在右側(cè)首行文字會向右偏移3px。解決辦法是在left元素上設(shè)置margin-right: -100px

　　[缺點(diǎn)2]當(dāng)右側(cè)容器中有元素清除浮動時(shí)，會使該元素不與左側(cè)浮動元素同行，從而出現(xiàn)文字下沉現(xiàn)象

【2】float + margin + (fix)

　　(fix)代表增加結(jié)構(gòu)，為了解決上述方法中的兩個(gè)缺點(diǎn)，可以通過增加結(jié)構(gòu)來實(shí)現(xiàn)。自適應(yīng)的一列外側(cè)增加一層結(jié)構(gòu).rightWrap并設(shè)置浮動。要實(shí)現(xiàn)自適應(yīng)效果，.rightWrap寬度必須設(shè)置為100%。若不設(shè)置，float后的元素寬度將由內(nèi)容撐開。同時(shí)再配合盒模型屬性的計(jì)算，設(shè)置計(jì)算后的負(fù)margin值，使兩列元素在同一行顯示。同時(shí)兩列之間的間距由.right的margin值確定。由于右側(cè)元素會層疊在左側(cè)元素之上，.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" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="rightWrap" >
        <div class="right"  >
            <p>right</p>
            <p>right</p>
        </div>        
    </div></div>

【3】float + margin + calc

　　除了增加結(jié)構(gòu)的方法外，還可以使用calc()

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

<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" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div></div>

【4】float + overflow

　　還可以使用overflow屬性來觸發(fā)bfc，來阻止浮動造成的文字環(huán)繞效果。由于使用overflow不會改變元素的寬度屬性，所以不需要重新設(shè)置寬度。由于設(shè)置overflow:hidden并不會觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設(shè)置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" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div></div>

思路2: inline-block

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

【1】inline-block + margin + calc

　　一般來說，要解決inline-block元素之間的間隙問題，要在父級設(shè)置font-size為0，然后在子元素中將font-size設(shè)置為默認(rèn)大小

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

<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" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <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" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="rightWrap" >
        <div class="right"  >
            <p>right</p>
            <p>right</p>
        </div>        
    </div></div>

思路3: table

　　使用table布局的缺點(diǎn)是元素被設(shè)置為table后，內(nèi)容撐開寬度，所以需要設(shè)置width:100%。若要兼容IE7-瀏覽器，需要改為<table>結(jié)構(gòu)。由于table-cell元素?zé)o法設(shè)置margin，若需要在元素間設(shè)置間距，需要增加結(jié)構(gòu)

<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" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="rightWrap" >
        <div class="right"  >
            <p>right</p>
            <p>right</p>
        </div>        
    </div>    </div>

思路4: absolute

　　absolute布局的缺點(diǎn)是由于父元素需要設(shè)置為relative，且子元素設(shè)置為absolute，所以父元素的高度并不是由子元素?fù)伍_的，需要單獨(dú)設(shè)置。

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

<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" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div>        </div>

思路5: flex

　　flex彈性盒模型是非常強(qiáng)大的布局方式。但由于其性能消耗較大，適合于局部小范圍的布局

　　[注意]IE9-不支持

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

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div>        </div>