三欄自適應佈局

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。