任务八：如何实现左侧宽度固定，右侧宽度自适应的布局

[LB-nan]

html

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

1. .box {
           width: 100%;
           height: 400px;
       }
   
       .left {
           width: 200px;
           height: 400px;
           background: red;
           position: absolute;
       }
   
       .right {
           width: calc(100% - 200px);
           height: 100%;
           background: green;
           margin-left: 200px;
       }

2. .box {
           width: 100%;
           height: 400px;
           display: flex;
       }
   
       .left {
           width: 200px;
           height: 100%;
           background: red;
       }
   
       .right {
           width: calc(100% - 200px);
           height: 100%;
           background: green;
       }

3. .box {
           width: 100%;
           height: 400px;
       }
   
       .left {
           width: 200px;
           float: left;
           height: 100%;
           background: red;
       }
   
       .right {
           height: 100%;
           background: green;
           margin-left: 200px;
       }

[zengkaiz]

楼上第一种做法.right里面的width应该写多了吧。 .content { height: 200px; text-align: left; } .left{ width: 200px; background: red; position: absolute; / float: left; / } .right{ background: green; margin-left: 200px; } 将position:absolute改成 float:left也可以

[zengkaiz]

1. 左边float + 右边overflow ；
2. 左边float 或者 position + 右边margin ；
3. 父display:felx + 右边flex:1 ； 4.左边float + 右边calc