看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西。

也是给我自己复习吧,以前有人问道,我还没答上来呢。==

总结了有两种方法:

使用绝对定位

1
2
3
4
5
6
7
<div class="top">this is top</div>
<div class="container">
<div class="left">this is left</div>
<div class="center">this is center</div>
<div class="right">this is right</div>
</div>
<div class="footer">this is footer</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
30
31
32
33
34
35
36
37
38
39
40
.top {
width: 100%;
height: 40px;
background-color: #cccccc;
}
.footer {
width: 100%;
height: 50px;
background-color: #abdc44;
}
/* 左右固定,中间自适应 */
/* Start */
.container {
width: 100%;
height: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 800px;
background-color: black;
}
.center {
width: auto; /* 如果没有这一句,那么,center这个div的文字就不会自动换行 */
margin: 0 400px;
height: 1000px;
background-color: yellow;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 900px;
background-color: red;
}
/* End */

效果是这样的:
三列布局

使用浮动

1
2
3
4
5
<div class="container">
<div class="right"></div>
<div class="left"></div>
<div class="center"></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
30
.container {
width: 100%;
/* 清除浮动 */
overflow: hidden;
}
.left,
.center,
.right {
height: 400px;
}
.left {
float: left;
width: 200px;
background-color: red;
}
.center {
margin-left: 210px;
margin-right: 410px;
background-color: antiquewhite;
}
.right {
float: right;
width: 400px;
background-color: aqua;
}