两栏布局的实现方式

实现右侧宽度固定，左侧自适应的两栏布局有很多方法，这里进行一下总结：

首先创建HTML文档：

<div class="wrapper">
    <div class="left">左边内容内容内容内容内容。</div>
    <div class="right">右边内容内容内容.</div>
</div>

再设置一下基础的CSS样式：

.right{
    width:100px;
    height:100px;  
    border:1px solid #000;
}
.left{
    height:100px;
    border:1px solid #000;
}

第一种方案：absolute + margin-left方案

.right{
    position:absolute;
    right:0;
}
.left{
    margin-right:100px;
}

第二种方案：flex方案

.wrapper{
    display:flex;
    align-items:flex-start;
}
.left{
    flex:1;
}

第三种方案：float + margin-left方案

.wrapper{
    overflow:hidden;
}
.right{
    float:right;
}
.left{
   margin-right:100px;
}