实现两栏布局

Posted on Edited on

用不同的方法实现左边固定，右边自适应的两栏布局。

1
2
3
4
<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

calc(100% - 140px)

两个inline-block元素并排显示。

1
2
3
4
5
6
7
8
9
10
11
.wrapper {
  font-size: 0; // 消除空格的影响
}
.left, .right {
  display: inline-block;
  vertical-align: top; // 顶端对齐
  font-size: 14px;
}
.right {
  width: calc(100% - 140px); // 140px为左侧元素的宽度
}

两个float元素并排显示。

1
2
3
4
5
6
7
8
9
.wrapper {
  overflow: auto; // 清除浮动
}
.left, .right {
  float: left;
}
.right {
  width: calc(100% - 140px);
}

float/position + margin-left

利用浮动和绝对定位元素脱离文档流的特性。

1
2
3
4
5
6
7
8
9
.wrapper {
  overflow: hidden; // 清除浮动
}
.left {
  float: left; // 也可以是 position: absolute;
}
.right {
  margin-left: 140px;
}

float + BFC

右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与左侧浮动的元素重叠。

1
2
3
4
5
6
7
8
9
10
.wrapper {
  overflow: auto;
}
.left {
  float: left;
}
.wrapper-float-bfc .right {
  overflow: auto; 
  margin-left: 0; // 用于设置盒子间隔
}

flex

flex使用简单。需要注意，flex容器的一个默认属性值align-items: stretch;，这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置align-items: flex-start;。

1
2
3
4
5
6
7
8
9
10
.wrapper {
  display: flex;
  align-items: flex-start;
}
.left {
  flex: 0 0 auto; // 等价于 flex: none; 表示不改变大小
}
.right {
  flex: 1 1 auto; // 等价于 flex: auto; 表示填充剩余空间
}

gird

实际生产中不使用，因为兼容性很差。

1
2
3
4
5
.wrapper {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start; // 去除默认等高效果
}