多列布局之一列、多列定宽及一列自适应布局

命题：

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

问题一：一列定宽及一列自适应

方案1：

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

缺点：1.ie6里会产生3px的bug，即right里的文字会向右缩进3px。解决方案：.left{margin-right:-100px;}

2.如right上加上了清除浮动，会掉到下一行。

改进方案：

//html<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>//style

.left{
   float:left;
   width:100 px;   position:relative;    //提高left层级
}

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

.right{ margin-left : 120 px; }

优点：兼容性好

缺点：结构复杂

方案2：

.left{
   float:left;
   width:100 px;   margin-right:20px
}
.right{
   overflow:hidden;          //触发BFC模式
}

BFC：block formating contact快速格式化。与外面格式隔离

缺点：IE6不支持

方案3：

.parent{
   display:table;
   width:100%;           //table默认宽度以内容为准，每列的宽度之和为table总宽   table-layout:fixed;   //提高渲染速度，实现了布局优先
}
.left,.right{
   display:table-cell;   //设为单元格  不能设margin
}
.left{
   width: 100 px;   padding-right:20px;
}

方案4：

.parent{
    display:flex;
}
.left{
    width: 100 px;
    margin-right:20px;
}
.right{
    flex:1;                 //相当于flex:1 1 0;   剩余空间都给了right
}

缺点：1.低版本浏览器中有兼容性问题；

2.由于flex是根据内容调整宽度，因此可能性能有问题

注意：尽量只在不太复杂的地方运用flex

问题一：多列定宽及一列自适应

一般只需将定宽的列写同一格式，即用同一个style

总结：注意兼容性，及掌握元素特性。