CSS实现两栏布局

# CSS实现两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应

# 利用浮动

将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 利用flex布局

将左边元素设置为固定宽度200px，将右边的元素设置为flex:1

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

1
2
3
4
5
6
7
8
9
10
11
12

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

← CSS样式穿透 CSS实现三栏布局→