一栏固定,一栏自适应

  • 左侧float,右侧margin-left
<div class="left">left</div>
<div class="right">right</div>
.left,.right{
    height:200px
}
.left{
    width:200px;
    float:left;
    background-color:red;
}
.right{
    margin-left:200px;
    background-color:yellow;
}
  • 绝对定位
<div class="left">left</div>
<div class="right">right</div>
.left,.right{
    height:200px
}
.left{
    position:absolute;
    left:0;
    width:200px;
    background-color:red;
}
.right{
    position:absolute;
    left:200px;
    right:0;
    background-color:yellow;
}
  • 弹性布局
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.container{
    display:flex;
}
.left,.right{
    height:200px
}
.left{
    width:200px;
    background-color:red   
}
.right{
    flex:1;
    background-color:yellow
}