html部分
<body> <form id="form1" runat="server"> <div id="wrap"> <div id="header">header</div> <div id="container"> <div id="left_side">left_side</div> <div id="content">content</div> <div id="right_side">right-side</div> </div> <div id="footer">footer</div> </div> </form> </body>
css部分
|
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
41
42
|
<style type=
"text/css"
>
#wrap{
width
:
700px
;
margin
:
0
auto
;
}
#header{
margin
:
20px
;
height
:
80px
;
border
:
solid
1px
#0000FF
;
}
#container{
position
:
relative
;
margin
:
20px
;
height
:
400px
;
}
#left_side{
position
:
absolute
;
top
:
0px
;
left
:
0px
;
border
:
solid
1px
#0000FF
;
width
:
170px
;
height
:
100%
;
}
#content{
margin
:
0px
190px
0px
190px
;
border
:
solid
1px
#0000FF
;
height
:
100%
;
}
#right_side{
position
:
absolute
;
top
:
0px
;
right
:
0px
;
border
:
solid
1px
#0000FF
;
width
:
170px
;
height
:
100%
;
}
#footer{
margin
:
20px
;
height
:
80px
;
border
:
solid
1px
#0000FF
;
}
</style>
|
说明
1、在#container中设置“position:relative;”，其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准。
2、左侧列#left_side和右侧#right_side列采用绝对定位，并且固定这两个div的宽度，而中间列#content由于需要根据浏览器自动调整，因此不设置类似属性。
但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px。
本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4983980.html，如需转载请自行联系原作者
