左侧固定,右侧自适应

flex布局实现(父盒子display flex 右侧 flex=1)

.father {      height: 500px;      background-color: pink;      display: flex;    }    .left {      height: 400px;      width: 200px;      background-color: orange;    }    .right {      flex: 1;      height: 450px;      background-color: skyblue;    }复制代码

定位实现 (父盒子加padding,子盒子定位)

.father {    height: 500px;    background-color: pink;    position: relative;    padding-left: 200px;  }  .left {    height: 400px;    width: 200px;    background-color: orange;    position: absolute;    left: 0;    top: 0;  }  .right {    height: 450px;    background-color: skyblue;  }复制代码

bfc实现 (左侧浮动,右侧触发bfc)

.father {      height: 500px;      background-color: pink;    }    .left {      height: 400px;      width: 200px;      background-color: orange;      float: left;    }    .right {      height: 450px;      background-color: skyblue;      /* 触发了bfc的盒子, 不与浮动的元素重叠 */      overflow: hidden;    }    
    复制代码

两侧固定中间自适应 (左右浮动,中间bfc)

.left {      float: left;      width: 200px;      height: 400px;      background-color: blue;    }    .right {      float: right;      width: 200px;      height: 400px;      background-color: blue;    }    .center {      height: 450px;      background-color: green;      overflow: hidden;    }复制代码