浮动
将左边固定区域设置浮动，右边 margin 设置为左边固定 div 的宽度
1
2
3
4
5
6
7
8
9
10
11
| .left{
width:200px;
height:100px;
float:left;
background-color:red;
}
.right{
height:100px;
margin-left:200px;
background-color:red;
}
|
绝对定位
将父盒子设置相对定位，左边绝对定位，子绝父相，右边 margin 设置为左边固定 div 的宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .box {
position: relative;
height: 100%;
width: 100%;
}
.box .left {
position: absolute;
height: 100%;
width: 100px;
background-color: rgb(34, 132, 21);
}
.box .right {
margin-left: 100px;
height: 100%;
background-color: rgb(10, 163, 197);
}
|
flex 布局
将父盒子设置弹性盒布局，左侧固定宽度，右侧设置 flex:1
1
2
3
4
5
6
7
8
9
10
11
12
13
| .box {
display: flex;
}
.box .left {
width: 100px;
background-color: rgb(34, 132, 21);
}
.box .right {
flex: 1;
background-color: rgb(10, 163, 197);
}
|
左侧浮动，右侧 overflow: hidden;,触发 bfc,bfc 区域不会和 float 元素重叠
1
2
3
4
5
6
7
8
9
10
| .box .left {
float: left;
width: 100px;
background-color: rgb(34, 132, 21);
}
.box .right {
overflow: hidden;
background-color: rgb(10, 163, 197);
}
|