Fork me on GitHub

自适应布局

发表于 | 更新于 | 本文总计 886 字

  记录一些自适应布局情形的写法。

左边栏固定，右边栏自适应

  如下DOM结构：

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

  预期效果：

table布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
* {
  margin: 0;
  padding: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100px;
  background: black;
}

.left {
  display: table-cell;
  width: 200px;
  background: yellow;
}

.right {
  display: table-cell;
  background: green;
}

BFC

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
* {
  margin: 0;
  padding: 0;
}

.container {
  height: auto;
  background: black;
  clear: both;
  /* overflow: auto; */
  /* 任何形成BFC的方案 */
}

.left {
  width: 200px;
  background: yellow;
  height: 100px;
  float: left;
}

.right {
  padding-left: 200px;
  background: green;
  height: 100px;
}

flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  background: black;
  display: flex;
}

.left {
  width: 200px;
  height: 100px;
  background: yellow;
}

.right {
  width: 100%;
  height: 100px;
  background: green;
}

绝对定位+calc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}

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

.right {
  margin-left: 200px;
  width: calc(100% - 200px);
  height: 100px;
  background: yellow;
}

inline-block

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
* {
  padding: 0;
  margin: 0;
}

.container {
  box-sizing: content-box;
  vertical-align: top; /* div对齐 */
  font-size: 0; 
  /* 消除div之间的空格 不去除会造成calc切割分行 */
}

.left {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: green;
  font-size: 14px; /* 覆盖顶部的副作用 */
}

.right {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100px;
  background: yellow;
  font-size: 14px; /* 覆盖顶部的副作用 */
}

左右边栏固定，中间自适应

  预期效果：

float:right + float: left + 层级特性

  其实个人看来这种实现并不是什么自适应的操作，只是利用层级的特性，将主体内容压在左右两块浮动元素下罢了…

  如下DOM结构：

1
2
3
4
5
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

  样式：

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
* {
  margin: 0;
  padding: 0;
}

.container {
  height: 250px;
}

.left {
  width: 200px;
  background-color: black;
  height: 100%;
  float: left;
}

.right {
  width: 200px;
  background-color: black;
  height: 100%;
  float: right;
}

.main {
  height: 100%;
  background-color: blue;
}

float:left + calc

1
2
3
4
5
<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>
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
28
29
* {
  margin: 0;
  padding: 0;
}

.container {
  height: 250px;
}

.left {
  width: 200px;
  background-color: black;
  height: 100%;
  float: left;
}

.main {
  height: 100%;
  float: left;
  width:calc(100% - 400px);
  background-color: blue;
}

.right {
  width: 200px;
  background-color: black;
  height: 100%;
  float: left;
}

flex布局

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
* {
  margin: 0;
  padding: 0;
}

.container {
  height: 250px;
  display: flex;
}

.left {
  width: 200px;
  background-color: black;
  height: 100%;
}

.main {
  height: 100%;
  background-color: blue;
  flex: 1; /* 等价于flex-grow: 1，flex-grow默认为0，即不会伸缩占据剩余空间 */
}

.right {
  width: 200px;
  background-color: black;
  height: 100%;
}

table布局

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
28
29
30
31
* {
  margin: 0;
  padding: 0;
}

.container {
  height: 250px;
  display: table;
  width: 100%; /* 必须设置，否则宽度以实际内部元素宽度综合决定 */
}

.container div {
  display: table-cell;
}

.left {
  width: 200px;
  background-color: black;
  height: 100%;
}

.main {
  height: 100%;
  background-color: blue;
}

.right {
  width: 200px;
  background-color: black;
  height: 100%;
}

绝对定位

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
28
29
30
31
32
33
34
* {
  margin: 0;
  padding: 0;
}

.container {
  height: 250px;
  position: relative;
}

.container div {
  position: absolute;
}

.left {
  width: 200px;
  background-color: black;
  height: 100%;
  left: 0;
}

.main {
  height: 100%;
  background-color: blue;
  right: 200px;
  left: 200px;
}

.right {
  width: 200px;
  background-color: black;
  height: 100%;
  right: 0;
}

引申

left 与 margin-left

  从效果来说，两者都能根据左侧定位。但是从副作用角度上来说，margin-left会根据左侧的定位元素生成一个左margin，而left则不会；从生效条件来说，left属性生效于设置了position的元素内；从参照定位元素来说，left取决于父级定位情况。

圣杯与双飞翼

  参考文章。