DIV+CSS 自適應布局

參考文檔 https://www.cnblogs.com/jizhijunboke/p/4990091.html

一、兩欄布局（左定寬，右自動）

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>

9. 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.                
   12.         }
   13.         .wrap_right{
   14.                 margin-left: 220px;
   15.                
   16.         }

   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.                
   13.         }
   14.         .wrap_right{
   15.                 margin-left: 220px;
   16.                
   17.         }

    

   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.                
   12.         }
   13.         .wrap_left{
   14.                 float: left;
   15.                 width: 200px;
   16.                 margin-left: -100%;
   17.                
   18.         }

   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.                
   10.         }
   11.         .wrap_right{
   12.                 overflow: hidden;
   13.                
   14.         }

   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.                
   12.         }
   13.         .wrap_right{        
   14.                 flex-grow:1;
   15.                 -webkit-flex-grow:1;
   16.                
   17.         }

    

   二、三欄布局
   掌握了上面的方法，我們會發現制作一個三欄布局也是非常容易的。
   下面我們在上面栗子的基礎上，看看實現一個兩側定寬，中間自適應的三欄布局如何實現
   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.                
   9.         }
   10.         
   11.         .wrap_content{
   12.                 margin-left: 220px;
   13.                 margin-right: 220px;
   14.                
   15.         }
   16.         .wrap_right{
   17.                 width: 200px;
   18.                 float: right;
   19.                
   20.         }

   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.                
   9.                 left: 0;
   10.         }
   11.         
   12.         .wrap_content{
   13.                 margin-left: 220px;
   14.                 margin-right: 220px;
   15.                
   16.         }
   17.         .wrap_right{
   18.                 width: 200px;
   19.                 position: absolute;
   20.                 right: 0;
   21.                
   22.         }

   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.                
   15.         }
   16.         
   17.         .wrap_content{
   18.                 margin-left: 220px;
   19.                 margin-right: 220px;
   20.                
   21.         }
   22.         .wrap_right{
   23.                 width: 200px;
   24.                 float: left;
   25.                 margin-left: -200px;
   26.                
   27.         }