典型的DIV＋CSS布局——左中右版式
中，运⽤的是浮动属性；这个实例，则运⽤了绝对定位属性。
1、在#container中设置“position:relative;”，其作⽤是使得后⾯的绝对定位的基准为#container⽽不是以浏览器为其准。
2、左侧列#left_side和右侧#right_side列采⽤绝对定位，并且固定这两个div的宽度，⽽中间列#content由于需要根据浏览器⾃动调整，因此不设置类似属性。
但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px
[html]
1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>
2.
div border属性
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
5. <html xmlns="/1999/xhtml" >
6. <head runat="server">
7.    <title>左中右版式</title>
8. </head>
9. <body>
10.    <form id="form1" runat="server">
11.    <div id="wrap">
12.        <div id="header">header</div>
13.        <div id="container">
14.            <div id="left_side">left_side</div>
15.            <div id="content">content</div>
16.            <div id="right_side">right-side</div>
17.        </div>
18.        <div id="footer">footer</div>
19.    </div>
20.    </form>
21. </body>
22. </html>
[css]
01. #wrap{
02. width:700px;
03. margin:0 auto;
04. }
05. #header{
06. margin:20px;
07. height:80px;
08. border:solid 1px #0000FF;
09. }
10. #container{
11. position:relative;
12. margin:20px;
13. height:400px;
14. }
15. #left_side{
16. position:absolute;
17.    top:0px;
18.    left:0px;
19. border:solid 1px #0000FF;
20. width:170px;
21. height:100%;
22. }
23. #content{
24. margin:0px 190px 0px 190px;
25. border:solid 1px #0000FF;
26. height:100%;
27. }
28. #right_side{
29. position:absolute;
30.    top:0px;
31.    right:0px;
32. border:solid 1px #0000FF;
33. width:170px;
34. height:100%;
35. }
36. #footer{
37. margin:20px;
38. height:80px;
39. border:solid 1px #0000FF;
40.
41. }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。