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

一、左邊浮動，右邊margin

.box{

height: 200px;

background-color: skyblue;

}

.left{

float:left;

width:100px;

height:200px;

}

.right{

margin-left:100px;

height:200px;

background:yellowgreen;

}

二、左邊浮動，右邊hidden。

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

.box{

height: 200px;

background-color: skyblue;

}

.left{

width:100px;

height:200px;

background:yellowgreen;

float:left;

}

.right{

overflow:hidden;

height:200px;

}

三、父盒子設置padding，左邊盒子定位

.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實現

.box{

width:100%;

}

.left{

width:100px;

height:200px;

background:skyblue;

}

.right{

background:yellowgreen;

}

五、flex實現

.box{

height: 200px;

background-color: skyblue;

display: flex; /* 設置為flex容器 */

}

.left{

width: 100px;

height: 200px;

}

.right{

height:200px;

background:yellowgreen;

flex:1; /* 比例設置為1，撐滿剩余空間 */

}