Adair

# 两列布局的几种方法

# 左侧 float: left 右侧 margin-left

.box1
  .left.left1 
  .right.right1
1
2
3
div {
  width: 100%;
  height: 300px;
  // overflow: hidden;
  margin-bottom: 20px;
}

.left {
  width: 200px;
  background: #999;
}
.right {
  background: #333;
}

.left1 {
  float: left;
}

.right1 {
  margin-left: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 左侧 float: left 右侧 overflow: hidden

.box2
  .left.left1
  .right.right2
1
2
3
.right2 {
  overflow: hidden; // 清除浮动
  width: calc(100% - 200px);
}
1
2
3
4

# 利用定位 position

.box3 {
  position: relative;

  .left3 {
  }

  .right3 {
    position: absolute;
    top: 0;
    left: 200px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# 利用 flex

.box4
  .left.left4
  .right.right4
1
2
3
.box4 {
  display: flex;
}
1
2
3

←