效果图
方法1：通过calc方法做宽度自适应
设置
width: calc(100% - 100px);（1）这里减100px是示例中有left类名的div宽度，具体减多少px根据情况来
（2）减号两侧的空格不能少，不然识别不了
<!DOCTYPE html><html lang="en"><head><style>*{margin: 0;padding: 0;}.main{height: 300px;background: #ccc;}/* 左侧div */.left{/* 宽度固定100px */width: 100px;height: 100px;background: #b8e5ff;float: left;}/* 右侧div */.right{/* 100% - 100px(左侧盒子的宽度) */width: calc(100% - 100px);height: 100px;background: #d1ffd6;float: left;}</style></head><body><div class="main"><div class="left">Left</div><div class="right">Right</div></div></body></html>
方法2：通过弹性盒flex做自适应
父级容器设置
display: flex;需要自适应宽度的元素设置flex: 1;
<!DOCTYPE html><html lang="en"><head><style>*{margin: 0;padding: 0;}.main{height: 300px;background: #ccc;display: flex;}/* 左侧div */.left{/* 宽度固定100px */width: 100px;height: 100px;background: #b8e5ff;float: left;}/* 右侧div */.right{flex: 1;height: 100px;background: #d1ffd6;float: left;}</style></head><body><div class="main"><div class="left">Left</div><div class="right">Right</div></div></body></html>
