在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？

首先给出DOM结构

<divclass="box">　　<divclass="box-left"></div>　　<divclass="box-right"></div></div>

1.利用float + margin实现

.box {
     height: 200px;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      float: left;
      background-color: blue;
    }
    
    .box-right {
      margin-left: 200px;
      background-color: red;
    }

2.利用calc计算宽度

.box {
     height: 200px;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      float: left;
      background-color: blue;
    }
    
    .box-right {
      width: calc(100% - 200px);
      float: right;
      background-color: red;
    }

3.利用float + overflow实现

 .box {
     height: 200px;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      float: left;
      background-color: blue;
    }
    
    .box-right {
      overflow: hidden;
      background-color: red;
    }

4.利用flex实现

.box {
      height: 200px;
      display: flex;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      background-color: blue;
    }
    
    .box-right {
      flex: 1; // 设置flex-grow属性为1，默认为0
      overflow: hidden;
      background-color: red;
    }

 

 

 

来源：https://www.cnblogs.com/bobo1/p/11834742.html