經典的兩欄布局和三欄布局的幾種簡單的實現


一,三欄布局

1,兩邊欄寬度固定值,中間欄寬度自適應

(1)絕對定位法

【關鍵點】1,絕對定位從普通文檔流中脫離出來,中間元素可以不用考慮左右定位元素占的位置

2,左右欄絕對定位到確定的位置上,(absolute,left,right)

3,中間欄左右外邊距設置為左右欄的寬度,因此自身寬度就自適應的變成了窗口寬度-左右兩邊欄的寬度

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      #left,#right{
11           background-color:yellow;
12           position:absolute;
13           top:0;
14           width:100px;
15           height:100%;
16      }
17      #left{
18           left:0;
19      }
20      #right{
21           right:0;
22      }
23      #center{
24           background-color:green;
25           height:100%;
26           margin:0 100px;
27      }
28 </style>
29 </head>
30 <body>
31 <div id="left">左邊欄</div>
32 <div id="right">右邊欄</div>
33 <div id="center">中間欄</div>
34 </body>
35 </html>

(2)浮動定位法

【關鍵點】與絕對定位類似,中間的自適應寬度是靠設置相對於窗口 的外邊距來確定的,左右欄從文檔流中脫離,浮動的各自位置

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      #left,#right{
11           background-color:yellow;
12           width:100px;
13           height:100%;
14      }
15      #left{
16           float:left;
17      }
18      #right{
19           float:right;
20      }
21      #center{
22           background-color:green;
23           height:100%;
24           margin:0 100px;
25      }
26 </style>
27 </head>
28 <body>
29 <div id="left">左邊欄</div>
30 <div id="right">右邊欄</div>
31 <div id="center">中間欄</div>
32 </body>
33 </html>

(3)負外邊距法

【關鍵點】1,中間欄由里外兩層構成,外層撐起整個內容區域,內層進行中間欄的布局,設置內層的左右外邊距給左右欄留出空間

2,左右欄浮動並設置負的外邊距浮動到相應位置

3,中間欄先於左右欄定位(三個div的位置順序一定是中間欄在前)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #main{
11      margin:0;
12      padding:0;
13      width:100%;
14      height:100%;
15      float:left;
16 }
17 #inner{
18      margin:0 200px;
19      background-color:green;
20      height:100%;
21 }
22 #left,#right{
23      width:200px;
24      height:100%;
25      float:left;
26      background-color:#a0b3d6;
27 }
28 #left{
29      margin-left:-100%;
30 }
31 #right{
32      margin-left:-200px;
33 }
34 </style>
35 </head>
36 <body>
37 <div id="main">
38 <div id="inner">this is main content</div>
39 </div>
40 <div id="left">this is left sidebar content</div>
41 <div id="right">this is right siderbar content</div>
42 </body>
43 </html>

(4)使用flexbox屬性

代碼沒有考慮一些低版本瀏覽器的兼容性,只做了一些簡單的flex屬性設置,但是效果很明顯

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      body{
11           display:flex;
12           align-items:stretch;
13      }
14      #left,#right{
15           background-color:yellow;
16           flex:0 100px;
17      }
18      #center{
19           background-color:green;
20           flex:1 auto;
21      }
22 </style>
23 </head>
24 <body>
25 <div id="left">左邊欄</div>
26 <div id="center">中間欄</div>
27 <div id="right">右邊欄</div>
28 </body>
29 </html>

2,三欄布局中間欄固定大小,兩邊欄自適應

(1)負margin法

【關鍵點】1,左右兩欄寬度不固定,因此在外層設置寬度各位50%,此時內層只需要左外邊距為中間寬度的一半就可以為中間留出固定的寬度,達到兩邊自適應的目的
2,設置三欄都為浮動
3,三欄放在一排正常顯示,只需要將左右兩欄的外層設置負外邊距就行了
4,這時三個div的順序應該是固定的
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #left,#right {
11      float: left;
12      margin: 0 0 0 -271px;
13      width: 50%;
14      height:100%;
15 }
16 
17 #main {
18      width: 540px;
19      float: left;
20      background: green;
21      height:100%;
22 } 
23 #left .inner,#right .inner {
24      margin: 0 0 0 271px;
25      background: orange;
26      height:100%;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="left">
32 <div class="inner">this is left sidebar content</div>
33 </div>
34 <div id="main">this is main content</div>
35 <div id="right">
36 <div class="inner">this is right siderbar content</div>
37 </div>
38 </body>
39 </html>

(2)flexbox

<!DOCTYPE html>
<html>
<head>
<style>
     html,body{
          margin:0;
          padding:0;
          height:100%;
     }
     body{
          display:flex;
          align-items:stretch;
     }
     #left,#right{
          background-color:yellow;
          flex:1 auto;
     }
     #center{
          background-color:green;
          flex:0 500px;
     }
</style>
</head>
<body>
<div id="left">左邊欄</div>
<div id="center">中間欄</div>
<div id="right">右邊欄</div>
</body>
</html>

二,兩欄布局,左邊欄為固定寬度的目錄欄,右邊欄寬度自適應

(1)負margin法

【關鍵點】1、首先讓左邊欄浮動到自己的位置,已經確定了大小寬度

2,中間欄設置內外兩層,外層寬度為100%,然后有一個左邊欄寬度的負margin,這樣就可以放下左邊欄了 

3,內層設置外邊距為左邊欄寬度,在確定的位置顯示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #left{
11      background: green;
12      float: left;
13      width: 200px;
14      height:100%;
15 }
16 
17 #main {
18      width: 100%;
19      height:100%;
20      float: left;
21      margin:0 0 0 -200px;
22 }
23 #inner {
24      margin: 0 0 0 200px;
25      background: orange;
26      height:100%;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="left">
32 <div class="inner">this is left sidebar content</div>
33 </div>
34 <div id="main">
35 <div id="inner">this is main content</div>
36 </div>
37 </body>
38 </html>

(2)絕對定位法

【關鍵點】1,左邊絕對定位,右邊就可以跟左邊放在一排

2,右邊通過設置外邊距來決定自己的大小了

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 html,body{
 6      height:100%;
 7      margin:0;
 8      padding:0;
 9 }
10 #left{
11      background: green;
12      position:absolute;
13      width: 200px;
14      height:100%;
15      top:0;
16      left:0;
17 }
18 
19 #main {
20      height:100%;
21      margin-left:200px;
22      background-color:purple;
23 }
24 </style>
25 </head>
26 <body>
27 <div id="left">
28 <div class="inner">this is left sidebar content</div>
29 </div>
30 <div id="main">this is the main content</div>
31 </body>
32 </html>

(3)flexbox

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5      html,body{
 6           margin:0;
 7           padding:0;
 8           height:100%;
 9      }
10      body{
11           display:flex;
12           align-items:stretch;
13      }
14      #left{
15           background-color:yellow;
16           flex:0 200px;
17      }
18      #center{
19           background-color:green;
20           flex:1 auto;
21      }
22 </style>
23 </head>
24 <body>
25 <div id="left">左邊欄</div>
26 <div id="center">中間欄</div>
27 </body>
28 </html>

 

【最后,關於負外邊距:就相當於一個透明的相紙折在了元素的內容上,其他的元素如果在負外邊距上是可以把外邊距的部分遮蓋掉的,但是如果元素有內容並沒有被遮蓋,還是可以顯示】


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com