前端知识学习-----多列布局（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特性将剩余的部分分配给此元素*/}

以上代码实现效果：