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

命题：

<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;
   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;
   100 px;
   position:relative;    //提高left层级
}

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

.right{ margin-left : 120 px; }

     优点：兼容性好

     缺点：结构复杂

   方案2：

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

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

      缺点：IE6不支持

   方案3：

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

    方案4：

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

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

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

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

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

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

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