三栏自适应布局

时间 2019-12-10

标签自适应布局栏目 CSS 繁體版

原文原文链接

经常使用的有三种方式：css

1、绝对定位法（最易理解）
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。因而实现了三栏自适应布局。html

 1 <html>
 2 
 3 <head>
 4 
 5          <title>三栏自适应布局</title>
 6 
 7          <style type="text/css">
 8 
 9  html,body{
10 
11  margin:0;
12 
13  height:100%;
14 
15                    }
16 
17  #left,#right{
18 
19  position:absolute;
20 
21  top:0;
22 
23  width:200px;
24 
25  height:100%;
26 
27                    }
28 
29  #left{
30 
31  left:0;
32 
33  background:red;
34 
35                    }
36 
37  #right{
38 
39  right:0;
40 
41  background:purple;
42 
43                    }
44 
45  #main{
46 
47  margin:0 205px;
48 
49  background:blue;
50 
51  height:100%;
52 
53                    }
54 
55          </style>
56 
57 </head>
58 
59 <body>
60 
61          <div id="left"></div>
62 
63          <div id="main"></div>
64 
65          <div id="right"></div>
66 
67 </body>
68 
69 </html>

2、margin负值法（不易理解）布局

 1 html,body{margin:0; height:100%;}  2 #main{width:100%; height:100%; float:left;}  3 #main #body{margin:0 210px; background:#ffe6b8; height:100%;}  4 #left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}  5 #left{margin-left:-100%;}  6 #right{margin-left:-200px;}  7 
 8 <div id=”main”>
 9   <div id=”body”></div>
10 </div>
11 <div id=”left”></div>
12 <div id=”right”></div>

重点是第一个div是中间的main，且必须套一个容器。ui

3、浮动法（最多见）spa

 1 <html>
 2 <head>
 3     <title>三栏自适应布局</title>
 4     <style type="text/css">
 5  html,body{
 6  margin:0; 
 7  height:100%;
 8         }
 9  #main{
10  height:100%; 
11  margin:0 210px; 
12  background:blue;
13         }
14  #left,#right{
15  width:200px; 
16  height:100%; 
17  background:red;
18         }
19  #left{
20  float:left;
21         }
22  #right{
23  float:right;
24         }
25     </style>
26 </head>
27 <body>
28     <div id="left"></div>
29     <div id="right"></div> 
30     <div id="main"></div> 
31 </body>
32 </html>

重点是中间的main要放在标签最后，缺点是须要用clear:both。3d