css布局

1、实现左边宽度固定，右边⾃适应

html结构

<div class="outer">
 <div class="left">固定宽度</div>
 <div class="right">⾃适应宽度</div>
</div>

⽅法1：左侧div设置成浮动：float: left，右侧div宽度会⾃拉升适应

.outer {
     width: 100%;
     height: 500px;
     background-color: yellow;
 }
.left {
     width: 200px;
     height: 200px;
     background-color: red;
     float: left; 
}
.right {
     height: 200px;
     background-color: blue;
}

⽅法2：对右侧:div进⾏绝对定位，然后再设置right=0，即可以实现宽度⾃适应

.outer {
     width: 100%;
     height: 500px;
     background-color: yellow;
     position: relative;
}
.left {
     width: 200px;
     height: 200px;
     background-color: red; 
}
.right {
     height: 200px;
     background-color: blue;
     position: absolute;
     left: 200px;
     top:0; 
     right: 0; 
}

⽅法3：将左侧div进⾏绝对定位，然后右侧div设置margin-left: 200px

.outer {
     width: 100%;
     height: 500px;
     background-color: yellow;
     position: relative; 
}
.left {
     width: 200px;
     height: 200px;
     background-color: red;
     position: absolute;
}
.right {
     height: 200px;
     background-color: blue;
     margin-left: 200px;
}

⽅法4：使⽤flex布局

.outer {
     width: 100%;
     height: 500px;
     background-color: yellow;
     display: flex;
}
.left {
     width: 200px;
     height: 200px;
     background-color: red; 
}
.right {
     height: 200px;
     background-color: blue;
     flex: 1; 
}