在頁(yè)面或者布局列表中，常常有左側(cè)固定，右側(cè)自使用的情況，接下來(lái)，這五種方法滿足這個(gè)需求。

一、左邊浮動(dòng)，右邊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; 
    }

二、左邊浮動(dòng)，右邊hidden。

這樣右邊的盒子就變成了一個(gè)絕緣的盒子。(所謂絕緣，就是和其他盒子不會(huì)有交集)

<!--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;           
  }

三、父盒子設(shè)置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實(shí)現(xiàn)

<!--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實(shí)現(xiàn)

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

<!--CSS部分-->

.box{
    height: 200px;
    background-color: skyblue;
    display: flex;   /* 設(shè)置為flex容器 */
}
.left{
    width: 100px;
    height: 200px;
}
.right{
    height:200px; 
    background:yellowgreen;
    flex:1; /* 比例設(shè)置為1，撐滿剩余空間 */
}