CSS中2种最基本的两列自适应布局

CSS中最基本的两列自适应布局，你掌握过没呢，分享下呢。

左边自适应宽度需要用.wrap包裹起来，设置.wrap的margin-right为负值，内部.left的margin-right为正值，两个值相等，互相抵消。

方式一：

.container{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
}
.wrap{
    width: 100%;
    line-height: 50px;
    background-color: greenyellow;
    float: left;
    margin-right: -200px;  /*与内部.left的值相互抵消*/
}
.wrap > .left{
    text-align: right;
    margin-right: 200px;
}
.right{
    width: 200px;
    line-height: 50px;
    background-color: plum;
    float: right;
}
 
<div class="container">
    <div class="wrap">
        <div class="left">左边自适应</div>
    </div>
    <div class="right">右边固定宽度200px</div>
</div

方式二：如果使用flex布局，就方便多了：

.container{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    display: flex;
}
.left{
    width: 100%;
    line-height: 50px;
    background-color: chocolate;
    text-align: right;
    flex-grow: 1;
}
.right{
    width: 200px;
    line-height: 50px;
    background-color: plum;
    float: right;
}
 
<div class="container">
    <div class="left">左边自适应</div>
    <div class="right">右边固定宽度200px</div>
</div>

OK，大家可以试着弄下呢。