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

一、左边浮动，右边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，撑满剩余空间 */

}