CSS实现左侧固定，右侧自适应方法

<div class="father">
  <!-- 左右div不能调换顺序来写 -->
  <div class="left">固定宽度区</div>
  <div class="right">自适应区</div>
</div>

1
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、利用左侧浮动 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

# 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

# 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

# 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

#HTML #CSS

上次更新: 2024/04/07, 16:22:38

← 纯css实现Loading加载效果 HTML字符串中匹配关键词高亮→