CSS实现左侧固定,右侧自适应方法
<div class="father">
<!-- 左右div不能调换顺序来写 -->
<div class="left">固定宽度区</div>
<div class="right">自适应区</div>
</div>
1
2
3
4
5
2
3
4
5
# 1、利用左侧浮动 float+右侧 margin-left
/* 利用浮动float+margin-left(左侧宽度需固定)*/
/* 左边元素宽度固定(加入设置为300px)向左浮动 */
/* 右边元素margin-left设置为100px,宽度不用设置 */
.father {
height: 300px;
}
.left {
width: 300px;
height: 300px;
background-color: pink;
float: left; /*左侧设置浮动float*/
}
.right {
margin-left: 300px; /*右侧设置左边距margin-left等于左边盒子的宽度*/
height: 300px;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 2、利用左侧浮动 float+右侧 BFC
/* 利用浮动+BFC */
/* 左边元素宽度固定(假如设置为300px),向左浮动 */
/* 右边元素设置overflow:hidden; */
.father {
height: 300px;
}
.left {
float: left; /*左浮动,固定宽度*/
width: 300px;
height: 300px;
background-color: pink;
}
.right {
overflow: hidden; /*设置 overflow:hidden触发BFC*/
height: 300px;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 3、利用 flex 布局
/* 利用flex布局 */
/* 父元素设置flex布局 */
/* 左边元素宽度固定 */
/* 右边元素设置flex:1 */
.father {
display: flex; /* 父元素设置flex布局 */
height: 300px;
}
.left {
width: 300px;
background-color: pink;
}
.right {
flex: 1; /* 右边元素设置flex:1 */
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 4、利用 grid 布局
/* 利用grid布局 */
/* 父元素设置 display:gird; 属性、设置gird-template-columns:300px 1fr 属性*/
/* 表示第一列宽度始终为300px 第二列的宽度自适应 */
.father {
display: grid; /*父元素设置 display:gird; */
height: 300px;
grid-template-columns: 300px 1fr; /* 设置gird-template-columns:300px 1fr */
}
.left {
background-color: pink;
}
.right {
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 5、利用定位
/* 利用绝对定位 */
/* 父级设置为相对定位,子级设置为绝对定位 */
/* 左边子元素设置left为0,宽度300,右边子元素right设置为0 */
.father {
position: relative; /* 父级设置为相对定位 */
}
.left {
position: absolute; /* 子级设置为绝对定位 */
width: 300px;
height: 300px;
left: 0; /* 左边子元素设置left为0*/
background-color: pink;
}
.right {
position: absolute; /* 子级设置为绝对定位 */
left: 300px;
right: 0; /* 右边子元素right设置为0*/
height: 300px;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上次更新: 2024/04/07, 16:22:38
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13