1 table 实现
效果预览1
2
3
4
5
6
7
8
9
10
11
12
13
14.container {
display: table;
width: 100%
}
.left {
display: table-cell;
background: rgb(222, 222, 248);
width: 20%;
}
.right {
display: table-cell;
background: rgb(248, 204, 204);
width: 80%;
}
2 flex 实现
效果预览1
2
3
4
5
6
7
8
9
10
11
12
13.container {
display: flex;
width: 100%
}
.left {
flex: 1;
background: rgb(222, 222, 248);
width: 20%;
}
.right {
background: rgb(248, 204, 204);
width: 80%;
}
2 grid 实现
效果预览1
2
3
4
5
6
7
8
9
10
11.container {
display: grid;
grid-template-columns: 20% 80%;
grid-template-rows: auto;
}
.left {
background: rgb(268, 222, 248);
}
.right {
background: rgb(248, 204, 204);
}
PS: 一个关于grid的练习 shttp://js.jirengu.com/zisinokipu/8/edit