布局之不定宽与自适应

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

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

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

//内容优先
.parent{
   display:table;            
   width:100%;           //table默认宽度以内容为准，每列的宽度之和为table总宽
}
.left,.right{
   display:table-cell;   //设为单元格  不能设margin
}
.left{
   width:0.1%;
   padding-right:20px;
}
.left p{
  width:200px;
}

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