CSS左侧固定右侧自适应的五种布局方法

---

在页面或者布局列表中，常常有左侧固定，右侧自使用的情况，接下来，这五种方法满足这个需求。

一、左边浮动，右边margin

<!--html部分-->

 <div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

<!--CSS部分-->
  .box{
     height: 200px;
        background-color: skyblue;
     }
    .left{
        float:left;
        width:100px; 
        height:200px; 
    }
    .right{
        margin-left:100px; 
        height:200px; 
        background:yellowgreen; 
    }

二、左边浮动，右边hidden。

这样右边的盒子就变成了一个绝缘的盒子。(所谓绝缘，就是和其他盒子不会有交集)

<!--html部分-->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
<!--CSS部分-->
.box{
    height: 200px;
    background-color: skyblue;
 }
 .left{
    width:100px; 
    height:200px; 
    background:yellowgreen; 
    float:left;
  }
  .right{
    overflow:hidden;
    height:200px;           
  }

三、父盒子设置padding，左边盒子定位

<!--html部分-->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
<!--CSS部分-->
.box{
    height: 200px;
    background-color: skyblue;
    padding-left: 100px;
    position: relative;
}
.left{
    width: 100px;
    height: 200px;
    background-color: yellowgreen;
    position: absolute;
    top:0;
    left:0;
}
.right{
    width: 100%;
}

四、table实现

<!--html部分-->
<table border="0" cellpadding="0" cellspacing="0" class="box">
      <tr>
       <td class="left"></td>
       <td class="right"></td>
      </tr>
</table>

<!--CSS部分-->

.box{
    width:100%;
    }
.left{
    width:100px; 
    height:200px; 
    background:skyblue; 
}
.right{
    background:yellowgreen;
}

五、flex实现

<!--html部分-->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

<!--CSS部分-->

.box{
    height: 200px;
    background-color: skyblue;
    display: flex;   /* 设置为flex容器 */
}
.left{
    width: 100px;
    height: 200px;
}
.right{
    height:200px; 
    background:yellowgreen;
    flex:1; /* 比例设置为1，撑满剩余空间 */
}