--------------------------三欄佈局之左右寬度固定，中間自適應--------------------------

-Advertisement-

常見的頁面佈局有 1、左右寬度固定，中間自適應； 2、上下高度固定，中間自適應； 3、左寬度固定，右自適應； 4、上高度固定，下自適應，下邊是我看過網上的視頻後寫出來的三欄佈局-左右寬高固定，中間自適應；下圖是我的代碼的運行結果：我在上邊總結了一下每種佈局的優缺點，以及去掉高度後哪種佈局還可以 ...

常見的頁面佈局有

1、左右寬度固定，中間自適應；

2、上下高度固定，中間自適應；

3、左寬度固定，右自適應；

4、上高度固定，下自適應，

下邊是我看過網上的視頻後寫出來的三欄佈局-左右寬高固定，中間自適應；

有5種佈局方式：float; position; flex; table; grid;

  1 <!DOCTYPE html><!-- html 5 -->
  2 <html>
  3 <head>
  4     <title>左中右三欄佈局</title>
  5     <style type="text/css">
  6         html * {
  7             padding: 0;
  8             margin: 0;
  9         }
 10         .layout{
 11             width: 100%;
 12             margin-top: 15px;
 13         }
 14         .layout .three_columns > div{
 15             min-height: 150px;
 16             text-align: center;
 17         }
 18         .layout .three_columns > div.center > p{
 19             margin-top: 15px;
 20         }
 21     </style>
 22 </head>
 23 <body>
 24     <!-- 第一種三欄佈局：float方式 -->
 25     <section class="layout float">
 26         <style type="text/css">
 27             .layout.float .left{
 28                 float: left;
 29                 width: 300px;
 30                 background: #90D9F7;
 31             }
 32             .layout.float .right{
 33                 float: right;
 34                 width: 300px;
 35                 background: #F5DE25;
 36             }
 37             .layout.float .center{
 38                 background: pink;
 39             }
 40         </style>
 41         <article class="three_columns">
 42             <div class="left"></div>
 43             <div class="right"></div>
 44             <div class="center">
 45                 <h1>三欄佈局float佈局</h1>
 46                 <p>優點：相容性比較好
 47                    缺點：脫離文檔流，清除浮動，處理與周邊元素佈局
 48                 </p>
 49                 <p>去掉高度後,內容會超出容器</p>
 50             </div>
 51         </article>
 52     </section>
 53 
 54     <!-- 第二種三欄佈局：position方式 -->
 55     <section class="layout position">
 56         <style type="text/css">
 57             .layout.position .left{
 58                 position: absolute;
 59                 left: 0;
 60                 width: 300px;
 61                 background: #90D9F7;
 62             }
 63             .layout.position .center{
 64                 position: absolute;
 65                 left: 300px;
 66                 right: 300px;
 67                 background: pink;
 68             }
 69             .layout.position .right{
 70                 position: absolute;
 71                 right: 0;
 72                 width: 300px;
 73                 background: #F5DE25;
 74             }
 75         </style>
 76         <srticle class="three_columns">
 77             <div class="left"></div>
 78             <div class="center">
 79                 <h1>三欄佈局position佈局</h1>
 80                 <p>優點：快速佈局
 81                    缺點：脫離文檔流，可使用性差
 82                 </p>
 83                 <p>去掉高度後,內容會超出容器</p>
 84             </div>
 85             <div class="right"></div>
 86         </srticle>
 87     </section>
 88 
 89     <!-- 第三種三欄佈局：flex方式 -->
 90     <section class="layout flexbox">
 91         <style type="text/css">
 92             .layout.flexbox{
 93                 margin-top: 180px;
 94             }
 95             .layout.flexbox .three_columns{
 96                 display: flex;
 97             }
 98             .layout.flexbox .left{
 99                 width:300px;
100                 background: #90D9F7;
101             }
102             .layout.flexbox .center{
103                 flex: 1;
104                 background: pink;
105             }
106             .layout.flexbox .right{
107                 width: 300px;
108                 background: #F5DE25;
109             }
110         </style>
111         <article class="three_columns">
112             <div class="left"></div>
113             <div class="center">
114                 <h1>三欄佈局flex佈局</h1>
115                 <p>解決上兩種方案的缺陷，最好用的佈局
116                 </p>
117                 <p>去掉高度後,容器會被內容撐開，還可以使用</p>
118             </div>
119             <div class="right"></div>
120         </article>
121     </section>
122 
123     <!-- 第四種三欄佈局：table -->
124     <section class="layout table">
125         <style type="text/css">
126             .layout.table .three_columns{
127                 display: table;
128                 width: 100%;
129                 height: 150px;
130             }
131             .layout.table .three_columns>div{
132                 display: table-cell;
133             }
134             .layout.table .left{
135                 width: 300px;
136                 background: #90D9F7;
137             }
138             .layout.table .center{
139                 background: pink;
140             }
141             .layout.table .right{
142                 width: 300px;
143                 background: #F5DE25;
144             }
145         </style>
146         <article class="three_columns">
147             <div class="left"></div>
148             <div class="center">
149                 <h1>三欄佈局table佈局</h1>
150                 <p>
151                     優點：相容性是最好的
152                     缺點：不好控制、當其中一個高度變，其他的高度也會變
153                 </p>
154                 <p>去掉高度後,容器會被內容撐開，還可以使用</p>
155             </div>
156             <div class="right"></div>
157         </article>
158     </section>
159 
160     <!-- 第五種三欄佈局：grid -->
161     <section class="layout grid">
162         <style type="text/css">
163             .layout.grid .three_columns{
164                 width: 100%;
165                 display: grid;
166                 grid-template-rows: 150px;
167                 grid-template-columns: 300px auto 300px;
168             }
169             .layout.grid .left{
170                 background: #90D9F7; 
171             }
172             .layout.grid .center{
173                 background: pink;
174             }
175             .layout.grid .right{
176                 background: #F5DE25;
177             }
178         </style>
179         <article class="three_columns">
180             <div class="left"></div>
181             <div class="center">
182                 <h1>三欄佈局grid佈局</h1>
183                 <p>
184                     優點：相容性是最好的
185                     缺點：不好控制、當其中一個高度變，其他的高度也會變
186                 </p>
187                 <p>去掉高度後,內容會超出容器</p>
188             </div>
189             <div class="right"></div>
190         </article>
191     </section>
192 </body>
193 </html>

下圖是我的代碼的運行結果：

我在上邊總結了一下每種佈局的優缺點，以及去掉高度後哪種佈局還可以使用，如果各位有覺得不對的地方，歡迎大家幫我糾正！

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

超簡單釘釘打卡破解教程

超簡單釘釘打卡破解教程公司前幾天要用釘釘打卡作為拖延症的我肯定天天遲到所以就一直找辦法可以遠程打卡什麼teamviewer 大牛定位都不是特別好用要麼要兩台手機要麼就是收費什麼的不過前兩天找到一個不錯的軟體我目前一直在用而且還是免費的就是需要xposed框架支持為了能不遲到還是折騰 ...
iOS 多線程 NSOperation、NSOperationQueue

1. NSOperation、NSOperationQueue 簡介 NSOperation、NSOperationQueue 是蘋果提供給我們的一套多線程解決方案。實際上 NSOperation、NSOperationQueue 是基於 GCD 更高一層的封裝，完全面向對象。但是比 GCD 更簡單 ...
【年終總結】微信前端社招有感

時間飛快，轉眼間8102還差一個月就over了，順了順好幾天沒理的鬍渣兒，好像已經老了不少。不，我還很年輕！雖然年終還沒到，但好像也差不多了。幾經輾轉，年底前終於拿到了微信的offer，可以說是今年一大幸事了。是一個結束，結束本命年的坎坷；是一個開始，開始新的徵程。這篇雜文就簡單記錄一下微信 ...
關於javascript閉包（Closure）和return之間的曖昧關係

什麼是閉包？阮一峰老師說的很清楚了，定義在一個函數內部的函數，在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。首先要瞭解Javascript的變數作用域：全局變數和局部變數。全局嘛，就是共用，任何一個函數內部可以直接讀取全局變數；局部嘛，就是私有，不暴露在外的。如何判斷該變數是全局還是局 ...
Vue -- vue-cli webpack打包開啟Gzip 報錯

前兩天項目上線，用vue-cli npm run build命令打包，打包完成後我擦嚇了一跳，15M。本來暫時不打算優化的，但是每次看著部署包這麼大，想想還是先優化一下，讓包好看點，免得以後出現心理陰影！在把 map文件幹掉後，發現 webpack 這打包的速度，也忒感人了。在進行不自動生成 ma ...
JS之setTimeOut與clearTimeOut

小練習1：針對HTML，分別使用 setTimeout 和 setInterval 實現以下功能：點擊按鈕時，開始改變 fade-obj 的透明度，開始一個淡出（逐漸消失）動畫，直到透明度為0 在動畫過程中，按鈕的狀態變為不可點擊在動畫結束後，按鈕狀態恢復，且文字變成“淡入” 在按鈕顯示淡入 ...
js 快速將字元串數組轉化為數字數組（互換）

轉載於這裡 1 ...
超鏈接按鈕點擊變色，原來的鏈接恢複原色

視頻播放列表的超鏈接按鈕點擊變色，原來的恢複原色，主要是讓用戶清楚的知道此刻播放的是哪一集。這裡所說的實現方法並不是利用css的link、hover、active所實現的，雖然css也能做到超鏈接點擊變色，但是卻不能用到這裡的需求上，因為css實現的點擊變色，是不能再點擊頁面其他地方的，很顯然，看視 ...