左右固定，中間自適應佈局

時間 2019-11-08

標籤左右固定中間自適應佈局欄目 CSS 简体版

原文原文鏈接

1.使用自身浮動法：html

自身浮動法的原理就是對左右分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中。對中間文檔流使用margin指定左右外邊距進行定位。
該佈局法的不足是三個元素的順序，middle必定要放在最後，middle佔據文檔流位置，因此必定要放在最後，左右兩個元素位置沒有關係。當瀏覽器窗口很小的時候，右邊元素會被擠到下一行瀏覽器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <style>
 9     .containter{
10         width:100%;
11         height:200px;
12     }
13     
14     .left{
15         width:300px;
16         height:100%;
17         float: left;
18         background: blue;
19     }
20 
21     .center{
22         height:100%;
23         margin-left: 300px;
24         margin-right: 300px;
25         background: red;
26     }
27     .right{
28         height:100%;
29         width:300px;
30         background: blue;
31         float: right;
32     }
33 
34 </style>
35 <!--中間部分必定要放最後-->
36 <div class="containter">
37     <div class="left"></div>
38     <div class="right"></div>
39     <div class="center"></div>
40 </div>
41 </body>
42 </html>

2.使用絕對定位法：佈局

絕對定位法原理是將左右兩邊使用absolute定位，由於絕對定位使其脫離文檔流，後面的middle會天然流動到他們上面，而後使用margin屬性，留出左右元素的寬度，既能夠使中間元素自適應屏幕寬度。
該法佈局的好處，三個div順序能夠任意改變。可是由於是絕對定位，若是頁面上還有其餘內容，top的值須要當心處理。flex

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <style>
 9     .containter{
10         position: relative;
11         width:100%;
12         height:500px;
13     }
14     .left{
15         position: absolute;
16         top:0;
17         left: 0;
18         width:300px;
19         height:100%;
20         float: left;
21         background: blue;
22     }
23 
24     .center{
25         height:100%;
26         margin-left: 300px;
27         margin-right: 300px;
28         background: red;
29     }
30     .right{
31         position: absolute;
32         top:0;
33         right: 0;
34         height:100%;
35         width:300px;
36         background: blue;
37         float: right;
38     }
39 
40 </style>
41 
42 <div class="containter">
43     <div class="left"></div>
44     <div class="center"></div>
45     <div class="right"></div>
46 </div>
47 </body>
48 </html>

3.使用flex佈局：spa

設置一個父div，添加樣式display：flex。中間div設置flex-grow：1，（等同代碼中設置flex：1。flex是grow、shrink、basis的簡寫）可是盒模型默認牢牢挨着，能夠使用margin控制外邊距。middle必定在中間，不然須要order屬性來調整。 code

經過項目屬性flex-grow設置middle的放大比例，將空餘的空間用middle來填充，使三個項目排滿一整行；默認爲0，也就是對剩餘空間不作處理。經過項目屬性flex-basis 設置left和right的固定寬度。htm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .main{
 8             width:100%;
 9             height:500px;
10             display: flex;
11             flex-direction: row;
12             justify-content: flex-start;
13         }
14 
15         .left{
16             flex:0 1 200px;
17             height:500px;
18             background-color: red;
19         }
20 
21         .middle{
22             flex:1;
23             height:100%;
24             background-color: yellow;
25 
26         }
27 
28         .right{
29             flex:0 1 500px;
30             height:500px;
31             background-color: blue;
32         }
33     </style>
34 </head>
35 <body>
36 <div class="main">
37     <div class="left"></div>
38     <div class="middle"></div>
39     <div class="right"></div>
40 </div>
41 </body>
42 </html>