CSS两栏布局
furrain 11/12/2020 css
# CSS 两栏布局
代码中 div 都没有设置高度，使用时请自行设置高度
# 左列定宽，右列自适应
# 浮动+margin
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
2
3
4
.left {
width: 300px;
background-color: yellow;
float: left;
}
.right {
background-color: blue;
margin-left: 300px;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
如果是右列定宽，左列自适应,则同理
.left {
width: 300px;
background-color: yellow;
float: right;
}
.right {
background-color: blue;
margin-right: 300px;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 浮动+BFC
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
2
3
4
.left {
width: 300px;
background-color: yellow;
float: left;
}
.right {
background-color: blue;
/*触发BFC*/
overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
如果是右列定宽，左列自适应,则同理
.left {
width: 300px;
background-color: yellow;
float: right;
}
.right {
background-color: blue;
/*触发BFC*/
overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 定位
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
2
3
4
.container {
position: relative;
}
.left {
position: absolute;
width: 300px;
left: 0;
background-color: yellow;
}
.right {
margin-left: 300px;
background-color: blue;
}
/*或者*/
.right {
position: absolute;
left: 300px;
right: 0;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
如果是右列定宽，左列自适应,则同理
.container {
position: relative;
}
.left {
position: absolute;
width: 300px;
right: 0;
background-color: yellow;
}
.right {
margin-right: 300px;
background-color: blue;
}
/*或者*/
.right {
position: absolute;
right: 300px;
left: 0;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# flex
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
2
3
4
.container {
display: flex;
}
.left {
width: 300px;
background-color: yellow;
}
.right {
flex: 1;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
如果是右列定宽，左列自适应,则同理
.container {
display: flex;
}
.left {
background-color: yellow;
flex: 1;
}
.right {
width: 300px;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 浮动+负外边距
<div class="container">
<div class="left"></div>
<div class="right">
<div class="content"></div>
</div>
</div>
1
2
3
4
5
6
2
3
4
5
6
.left {
width: 300px;
background-color: yellow;
float: left;
margin-right: -100%;
}
.right {
width: 100%;
float: left;
}
.content {
margin-left: 300px;
background-color: blue;
}
/*另一种方法*/
.left {
float: left;
width: 300px;
/*定位使得.left在最上面*/
position: relative;
background-color: yellow;
}
.right {
margin-left: 300px;
background-color: blue;
}
.content {
float: right;
width: 100%;
margin-left: -300px;
}
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
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
如果是右列定宽，左列自适应,则同理
.left {
width: 300px;
background-color: yellow;
float: right;
margin-left: -100%;
}
.right {
width: 100%;
float: right;
}
.content {
margin-right: 300px;
background-color: blue;
}
/*另一种方法*/
.left {
float: right;
width: 300px;
position: relative;
background-color: yellow;
}
.content {
float: left;
position: relative;
}
.right {
margin-right: 300px;
background-color: blue;
}
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
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
# table 布局
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
2
3
4
.container {
width: 100%;
display: table;
table-layout: fixed;
}
.left {
display: table-cell;
width: 300px;
background-color: yellow;
}
.right {
display: table-cell;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
如果是右列定宽，左列自适应,则同理
.container {
width: 100%;
display: table;
table-layout: fixed;
}
.left {
display: table-cell;
background-color: yellow;
}
.right {
width: 300px;
display: table-cell;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 左列不定宽，右列自适应
# 浮动+BFC
<div class="container">
<div class="left">
不再设置宽度，由自身的内容撑起来
</div>
<div class="right"></div>
</div>
1
2
3
4
5
6
2
3
4
5
6
.left {
background-color: yellow;
float: left;
}
.right {
background-color: blue;
/*触发BFC*/
overflow: hidden;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
如果是右列定宽，左列自适应,则同理
.left {
background-color: yellow;
float: right;
}
.right {
background-color: blue;
/*触发BFC*/
overflow: hidden;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# flex
<div class="container">
<div class="left">
不再设置宽度，由自身的内容撑起来
</div>
<div class="right"></div>
</div>
1
2
3
4
5
6
2
3
4
5
6
.container {
display: flex;
}
.left {
background-color: yellow;
}
.right {
flex: 1;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
如果是右列定宽，左列自适应,则同理
.container {
display: flex;
}
.left {
background-color: yellow;
flex: 1;
}
.right {
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10