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

[zengkaiz]

No description provided.

[LB-nan]

html

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

.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;
        }

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

.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