前端知識學習-----多列布局（1）

定寬 + 自適應 佈局的幾種實現：

01. float + margin

上代碼：

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

        p background: #666;}
        .right > p {background: #999;}
        .left {float: left;width: 100px;}
        .right {margin-left: 120px;}

效果爲：左側定寬100px，右側寬度自適應；

02. float + overflow

上代碼：

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

p {background: #666;}
.right > p {background: #999;}
.left {float: left;width: 100px;margin-right: 20px;}
.right {overflow: hidden;}

03. table

上代碼：

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

p {background: #666;}
.right > p {background: #999;}
.partent {display: table;width: 100%; /*table寬度受內容影響，需給定寬度*/
          table-layout: fixed;/*設置爲佈局優先，特性爲下面的td元素爲等寬*/}
.left,.right {display: table-cell;/*div這樣設置相當於td元素*/}
.left {width: 100px;padding-right: 20px;/*td無法設置margin值*/}

04. flex

上代碼：

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

p {background: #666;}
.right > p {background: #999;}
.parent {display: flex;}
.left {width: 100px;margin-right: 20px;}
.right {flex: 1;}

以上代碼實現效果：

不定寬 + 自適應佈局的幾種實現：

01. float + overflow

上代碼：

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

p {background: #666;}
.right > p {background: #999;}
.left {float: left;margin-right: 20px;}
.left > p {width: 150px;} /*此處可不加，只是爲了說明左側的寬度受內容影響*/
.right {overflow: hidden;}

02. table

上代碼：

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

p {background: #666;}
.right > p {background: #999;}
.left > p {width: 150px;}/*此處可不加，只是爲了說明左側的寬度受內容影響*/
.parent {display: table;width: 100%;}
.left,.right {display: table-cell;}
.left {width: 0.1%;padding-right: 20px; }/*table下，單元格的寬度受內容影響*/

03. flex

上代碼：

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

p {background: #666;}
.right > p {background: #999;}
.left > p {width: 150px;}/*此處可不加，只是爲了說明左側的寬度受內容影響*/
.parent {display: flex;}
.left {margin-right: 20px;}
.right {flex: 1; /*flex特性將剩餘的部分分配給此元素*/}

以上代碼實現效果：