CSS实现三栏布局

# CSS实现三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局

# 利用绝对定位

左右两栏设置为绝对定位，中间设置对应方向大小的margin的值

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 利用flex布局

左右两栏设置固定大小，中间一栏设置为flex:1

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上次更新: 2024/08/14, 04:14:33

← CSS实现两栏布局 CSS实现双飞翼（圣杯）布局→