DIV+CSS 自適應佈局

時間  2019-11-18
標籤 div+css div css 自適應 佈局 欄目 HTML 简体版
原文   原文鏈接

兩欄佈局，左邊定寬200px，右邊自適應。如何實現？
個人第一個反應就是：用flex伸縮盒呀，而後balabala...
說完以後，面試官說，還有沒有別的方法？flex有些瀏覽器不支持
嗯...我愣了一下，日常遇到這種問題貌似都是這麼寫的...
別的方法？我又想了想。JS?對，JS確定能夠。
而後就說，能夠用JS獲取當前窗口寬度，而後減去200px就是右邊的寬度了
面試官：嗯，這樣的確能夠，可是佈局通常不要用JS，還有沒有別的方法？CSS的
額，這下我徹底愣住了好嘛，人也變得有些緊張。還要別的方法啊，什麼方法呢？？？
哎呀媽呀，想不出來，腫麼辦...
而後面試官看了我半天，十分體諒的說，那咱們進行下一個問題吧...
（以上面試官原話記不大請了，可是意思就是這樣~）

回來後，通過百度，哇！原來方法如此之多~還如此簡單~
下面就來總結一下~html


1、兩欄佈局（左定寬，右自動）
1. float + margin
即固定寬度元素設置float屬性爲left,自適應元素設置margin屬性，margin-left應>=定寬元素寬度。
舉例：
HTML代碼：前端

  1.     <div class="wrap">
  2.             <div class="wrap_left">
  3.                     我是左欄
  4.             </div>
  5.             <div class="wrap_right">
  6.                     我是右欄
  7.             </div>
  8.     </div>
複製代碼


CSS代碼web

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 margin: 10px;
  7.         }
  8.         .wrap_left{
  9.                 float: left;
  10.                 width: 200px;
  11.                 background-color: red;
  12.         }
  13.         .wrap_right{
  14.                 margin-left: 220px;
  15.                 background-color: green;
  16.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



2.position + margin
即在父標籤設置position屬性爲relative；子標籤中定寬元素設置position屬性爲absolute；自適應元素設置margin屬性，margin-left>=定寬元素寬度。
舉例：
HTML代碼面試

  1.     <div class="wrap">
  2.             <div class="wrap_left">
  3.                     我是左欄
  4.             </div>
  5.             <div class="wrap_right">
  6.                     我是右欄
  7.             </div>
  8.     </div>
複製代碼


CSS代碼瀏覽器

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 margin: 10px;
  7.                 position: relative;
  8.         }
  9.         .wrap_left{
  10.                 position: absolute;
  11.                 width: 200px;
  12.                 background-color: red;
  13.         }
  14.         .wrap_right{
  15.                 margin-left: 220px;
  16.                 background-color: green;
  17.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



3.float + 負margin
即給自適應寬度元素定義一個父標籤，並設置float屬性爲left；width爲100%；自適應寬度元素設置margin，margin-left應>=定寬元素寬度；
固定寬度元素設置margin-left屬性爲負值：-100%；
除此以外應注意HTML結構中應先寫自適應元素，再寫固定寬度元素。
舉例：
HTML代碼ide

  1. <div class="wrap">
  2.             <div class="wrap_right">
  3.                     我是右欄
  4.             </div>
  5.     </div>
  6.            <div class="wrap_left">
  7.                     我是左欄
  8.     </div>
複製代碼


CSS代碼佈局

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 float: left;
  7.                 width: 100%;
  8.         }
  9.         .wrap .wrap_right{
  10.                 margin-left: 220px;
  11.                 background-color: green;
  12.         }
  13.         .wrap_left{
  14.                 float: left;
  15.                 width: 200px;
  16.                 margin-left: -100%;
  17.                 background-color: red;
  18.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



注：使用的float屬性，必要時清除一下浮動。

4.用table佈局實現
來自評論裏@qazxsw的方法：flex

  1. <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
  2.     <tr>
  3.         <td width="200" bgcolor="red"></td>
  4.         <td bgcolor="green"></td>
  5.     </tr>
  6. </table>
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com


不過這個方法，必定要設置高度才能夠~


5.觸發BFC實現   —— 來自評論裏柯南同窗@15913127081的方法
關於BFC是什麼、怎麼觸發BFC以及BFC能夠用來作什麼，你們能夠看看這篇，前端精選文摘：BFC 神奇背後的原理（我會告訴你我也是纔看的麼~哈哈~）
實現方法，即爲定寬元素設置float:left;自適應寬度元素設置能夠觸發BFC的屬性。（能夠觸發BFC的屬性？繼續看上面那個連接！！）
示例：
HTML代碼：spa

  1.         <div class="wrap_left">
  2.                 我是左欄
  3.         </div>
  4.         <div class="wrap_right">
  5.                 我是右欄
  6.         </div>
複製代碼


CSS代碼：orm

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         
  6.         .wrap_left{
  7.                 float: left;
  8.                 width: 200px;
  9.                 background-color: red;
  10.         }
  11.         .wrap_right{
  12.                 overflow: hidden;
  13.                 background-color: green;
  14.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



前面有說到通常我都是用的flex伸縮盒，那也來講一下用flex怎麼實現的吧
6.flex伸縮盒方法
即父標籤設置display:flex屬性，自適應元素設置flex-grow:1;
HTML代碼

  1.     <div class="wrap">
  2.                 <div class="wrap_left">
  3.                         我是左欄
  4.                 </div>
  5.             <div class="wrap_right">
  6.                         我是右欄
  7.                 </div>
  8.         </div>
複製代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 display: flex;
  7.                 display: -webkit-flex;
  8.         }
  9.         .wrap_left{                
  10.                 width: 200px;
  11.                 background-color: red;
  12.         }
  13.         .wrap_right{        
  14.                 flex-grow:1;
  15.                 -webkit-flex-grow:1;
  16.                 background-color: green;
  17.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



進階
2、三欄佈局
掌握了上面的方法，咱們會發現製做一個三欄佈局也是很是容易的。
下面咱們在上面栗子的基礎上，看看實現一個兩側定寬，中間自適應的三欄佈局如何實現
1. float + margin（兩側定寬，中間自適應）
HTML代碼：

  1.         <div class="wrap_left">
  2.                     我是左欄
  3.         </div>
  4.             <div class="wrap_right">
  5.                     我是右欄
  6.             </div>
  7.         <div class="wrap_content">
  8.             我是中間欄
  9.         </div>
複製代碼


CSS代碼：

  1. html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap_left{
  6.                 width: 200px;
  7.                 float: left;
  8.                 background-color: red;
  9.         }
  10.         
  11.         .wrap_content{
  12.                 margin-left: 220px;
  13.                 margin-right: 220px;
  14.                 background-color: yellow;
  15.         }
  16.         .wrap_right{
  17.                 width: 200px;
  18.                 float: right;
  19.                 background-color: green;
  20.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



2. position + margin（兩側定寬，中間自適應）
HTML代碼：

  1. <div class="wrap_left">
  2.                 我是左欄
  3.     </div>
  4.         <div class="wrap_right">
  5.                 我是右欄
  6.         </div>
  7.     <div class="wrap_content">
  8.         我是中間欄
  9.     </div>
複製代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap_left{
  6.                 width: 200px;
  7.                 position: absolute;
  8.                 background-color: red;
  9.                 left: 0;
  10.         }
  11.         
  12.         .wrap_content{
  13.                 margin-left: 220px;
  14.                 margin-right: 220px;
  15.                 background-color: yellow;
  16.         }
  17.         .wrap_right{
  18.                 width: 200px;
  19.                 position: absolute;
  20.                 right: 0;
  21.                 background-color: green;
  22.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



3.float + 負margin（兩側定寬，中間自適應）
HTML代碼

  1. <div class="wrap">
  2.             <div class="wrap_content">
  3.                 我是中間欄
  4.             </div>
  5.     </div>
  6.     <div class="wrap_left">
  7.                 我是左欄
  8.     </div>
  9.         <div class="wrap_right">
  10.                 我是右欄
  11.         </div>
複製代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 float: left;;
  7.                 width: 100%;
  8.         }
  9.         .wrap_left{
  10.                 width: 200px;
  11.                 float: left;
  12.                 margin-left: -100%;
  13.                 background-color: red;
  15.         }
  16.         
  17.         .wrap_content{
  18.                 margin-left: 220px;
  19.                 margin-right: 220px;
  20.                 background-color: yellow;
  21.         }
  22.         .wrap_right{
  23.                 width: 200px;
  24.                 float: left;
  25.                 margin-left: -200px;
  26.                 background-color: green;
  27.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



4.table實現

  1.         <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
  2.     <tr>
  3.         <td width="200" bgcolor="red"></td>
  4.         <td bgcolor="yellow"></td>
  5.         <td width="200" bgcolor="green"></td>
  6.     </tr>
  7.     </table>
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com



5.BFC方法
HTML代碼

  1.         <div class="wrap_left">
  2.                 我是左欄
  3.         </div>
  4.     <div class="wrap_right">
  5.                 我是右欄
  6.         </div>
  7.         <div class="wrap_content">
  8.                 我是中間欄
  9.         </div>
複製代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         
  6.         .wrap_left{
  7.                 float: left;
  8.                 width: 200px;
  9.                 background-color: red;
  10.         }
  11.         .wrap_right{
  12.                 float: right;
  13.                 width: 200px;
  14.                 background-color: green;
  15.         }
  16.         .wrap_content{
  17.                 overflow: hidden;
  18.                 background-color: yellow;
  19.         }
複製代碼
運行代碼複製代碼保存代碼提示：您能夠先修改部分代碼再運行!power by  W3Cfuns.com


注：HTML中先寫定寬元素，再寫自適應寬度元素。

6.flex伸縮盒
即父標籤設置display:flex屬性，自適應元素設置flex-grow:1;
HTML代碼

  1.     <div class="wrap">
  2.                 <div class="wrap_left">
  3.                         我是左欄
  4.                 </div>
  5.                 <div class="wrap_content">
  6.                         我是中間欄
  7.                 </div>
  8.             <div class="wrap_right">
  9.                         我是右欄
  10.                 </div>
  11.         </div>
複製代碼


CSS代碼

  1.         html,body,div{
  2.                 margin: 0;
  3.                 padding: 0;
  4.         }
  5.         .wrap{
  6.                 display: flex;
  7.                 display: -webkit-flex;
  8.         }
  9.         .wrap_left{                
  10.                 width: 200px;
  11.                 background-color: red;
  12.         }
  13.         .wrap_right{        
  14.                 width: 200px;
  15.                 background-color: green;
  16.         }
  17.         .wrap_content{
  18.                 flex-grow:1;
  19.                 -webkit-flex-grow:1;
  20.                 background-color: yellow;
  21.         }
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程