原始代码
html 部分
1
2
3
4
5
| <div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
|
css 部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .center {
width: 100%;
height: 150px;
background-color: #94E8FF;
}
.left {
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
width: 200px;
height: 150px;
background-color: #8990D5;
}
|
效果展示
原始效果
最终效果
实现方法
浮动布局
1
2
3
4
5
| <div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .center {
width: 100%;
height: 150px;
background-color: #94E8FF;
}
.left {
float: left;
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
float: right;;
width: 200px;
height: 150px;
background-color: #8990D5;
}
|
定位布局
1
2
3
4
5
| <div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">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
| .container {
position: relative;
}
.center {
position: absolute;
left: 100px;
right: 200px;
height: 150px;
background-color: #94E8FF;
}
.left {
position: absolute;
left: 0px;
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
position: absolute;
right: 0px;
width: 200px;
height: 150px;
background-color: #8990D5;
}
|
flex 布局
1
2
3
4
5
| <div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .container {
display: flex;
}
.center {
flex-grow: 1;
height: 150px;
background-color: #94E8FF;
}
.left {
order: -1;
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
width: 200px;
height: 150px;
background-color: #8990D5;
}
|
grid 布局
1
2
3
4
5
| <div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .container {
display: grid;
grid-template-columns: 100px 1fr 200px;
}
.center {
width: 100%;
height: 150px;
background-color: #94E8FF;
}
.left {
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
width: 200px;
height: 150px;
background-color: #8990D5;
}
|
table 布局
1
2
3
4
5
| <div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .container {
display: table;
}
.center {
display: table-cell;
width: 100%;
height: 150px;
background-color: #94E8FF;
}
.left {
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
width: 200px;
height: 150px;
background-color: #8990D5;
}
|
圣杯布局
1
2
3
4
5
| <div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">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
| .container {
overflow: hidden;
padding-left: 100px;
padding-right: 200px;
}
.center {
float: left;
width: 100%;
height: 150px;
background-color: #94E8FF;
}
.left {
position: relative;
left: -100px;
float: left;
margin-left: -100%;
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
position: relative;
right: -200px;
float: left;
margin-left: -200px;
width: 200px;
height: 150px;
background-color: #8990D5;
}
|
双飞翼布局
1
2
3
4
5
6
7
| <div class="container">
<div class="center-container">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">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
| .container {
overflow: hidden;
}
.center-container {
float: left;
width: 100%;
}
.center-container .center {
margin-left: 100px;
margin-right: 200px;
width: 100%;
height: 150px;
background-color: #94E8FF;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 150px;
background-color: #8990D5;
}
|