布局之不定宽与自适应

不定宽：指可设置任意宽度，或宽度有内容决定。

自适应：无论其他元素怎么变，它都不用改。

命题：设置不定宽与自适应

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

方案1：float+overflow

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

方案2：table

//布局优先.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;}

方案3：flex

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

附加：多列不定宽与自适应

把不定宽的样式设为一致即可