页面布局-多列布局-定宽与自适应 2.16

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

1. float + margin

.left{float:left;width:100px;}
.right{margin-left:110px;}

缺点：不兼容IE6;right中如果清除浮动，会产生bug

2. float + margin + (fix)

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

.left{
        float: left; width: 100px;
        position: relative;//提高层级，才能选中其中的文字
    }
.right-fix{
        float: right; width: 100%;
        margin-left: -100px;
    }
.right{
        margin-left: 120px;
    }

3. float + overflow

.left{
      float:left;
      width:100px;
      margin-right:20px;//间距
}
.right{overflow:hidden;}

4.table

.parent{display: table; width: 100%;table-layout: fixed;}
.left{width:100px;padding-right:20px;}
.left,.right{display: table-cell;}

5.flex

.parent{display: flex;}
.left{width:100px;padding-right:20px;}
.right{flex: 1}

缺点：兼容性差；做小范围的布局