CSS三栏布局
furrain 11/12/2020 css
# CSS 三栏布局
代码中 div 都没有设置高度，使用时请自行设置高度
# 浮动+margin
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
1
2
3
4
5
2
3
4
5
.left {
float: left;
width: 200px;
background-color: red;
}
.right {
width: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 200px;
margin-right: 200px;
background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 浮动+BFC
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
1
2
3
4
5
2
3
4
5
.left {
float: left;
width: 200px;
background-color: red;
}
.right {
width: 200px;
background-color: blue;
float: right;
}
.main {
overflow: hidden;
background-color: green;
}
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
# flex
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
1
2
3
4
5
2
3
4
5
.container {
display: flex;
}
.main {
flex: 1;
background-color: red;
}
.left {
width: 200px;
background-color: blue;
}
.right {
width: 200px;
background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# table
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
1
2
3
4
5
2
3
4
5
.container {
display: table;
}
.left {
width: 200px;
display: table-cell;
background-color: red;
}
.main {
display: table-cell;
background-color: blue;
}
.right {
display: table-cell;
width: 200px;
background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 定位
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
1
2
3
4
5
2
3
4
5
.container {
position: relative;
}
.main {
margin: 0 200px;
background-color: green;
}
.left {
position: absolute;
width: 200px;
left: 0;
background-color: red;
}
.right {
position: absolute;
width: 200px;
background-color: blue;
right: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 双飞翼布局
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
1
2
3
4
5
2
3
4
5
.content {
float: left;
width: 100%;
}
.main {
margin-left: 200px;
margin-right: 200px;
background-color: green;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
float: right;
margin-left: -200px;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 圣杯布局
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
5
2
3
4
5
.container {
margin-left: 200px;
margin-right: 200px;
}
.main {
float: left;
width: 100%;
background-color: red;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
background-color: blue;
}
.right {
float: left;
width: 200px;
margin-left: -200px;
position: relative;
right: -200px;
background-color: green;
}
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25