碼上快樂

相關內容    簡體    繁體

DIV+CSS 自適應布局

本文轉載自   查看原文   2015-11-23 23:29   9030    HTML/CSS/ 自適應布局/ 兩欄自適應布局/ 三欄自適應布局

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

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


一、兩欄布局（左定寬，右自動）
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代碼

  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代碼

  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的方法：

  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代碼：

  1.         <div class="wrap_left">
  2.                 我是左欄
  3.         </div>
  4.         <div class="wrap_right">
  5.                 我是右欄
  6.         </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.                 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



進階
二、三欄布局
掌握了上面的方法，我們會發現制作一個三欄布局也是非常容易的。
下面我們在上面栗子的基礎上，看看實現一個兩側定寬，中間自適應的三欄布局如何實現
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.         }
復制代碼


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 DIV+CSS實現自適應表格布局 div+css怎么讓圖片自適應大小 DIV+CSS 三欄布局 CSS 自適應布局 div+css全屏自適應+水平垂直居中 【同事武功傳授】 上下左右布局（DIV+CSS） div+css對網頁進行布局 div+css 布局技巧總計 DIV+CSS布局的優勢和弊端 css常見自適應布局
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM