最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后台，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。反正挺實用，值得收藏！
先看HTML代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>左側固定，右側自適應</title> </head> <body> <h1>左側固定，右側自適應布局</h1> <div class="left-fixed_right-auto"> <div class="left"> 左側定寬左側定寬左側定寬左側定寬左側定寬左側定寬 </div> <div class="right"> <div class="right-content"> 右側自適應,這是會自動換行的換行的換行的發動發動發扥扥這是會自動換行的換行的換行的發動發動發扥扥這是會自動換行的換行的換行的發動發動發扥扥這是會自動換行的換行的換行的發動發動發扥扥 </div> </div> </div> </body> </html> css代碼
*{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 兩列右側自適應布局 */ .left-fixed_right-auto{ width: 100%; height: 200px; clear: both; display: inline-block; margin-top: 20px; } .left{ position:relative; float:left; width:200px;/* 數值核心1 */ height: 100%; margin-right:-200px;/* 數值核心2 */ background: red; } .right{ float:right; width:100%; height: 100%; background: pink; } .right-content{ margin-left:200px;/* 數值核心3 */ height: 100%; background: blue; } 你可以嘗試改變你的瀏覽器窗口，會發現，不管怎么改變大小，始終都是這種布局。有了這個規律，便可以實現一種動態效果，比如有一種場景： 左側里面放一個按鈕，通過點擊這個按鈕，來切換左側的寬度大小。當左側變窄時，右側自動變寬；當左側變寬時，右側自動變窄，下面來實現一下： js代碼，在這之前，需要注釋css中的以下三行代碼
.left{ position:relative; float:left; /* width:200px; */ height: 100%; /* margin-right:-200px; */ background: red; } .right-content{ /* margin-left:200px; */ height: 100%; background: blue; } 其實這三行我已在注釋中標明了，分別是數值核心1，2，3. javascript(我沒有寫window.onload，請務必放到dom的下面執行)
var doc=document, /** * [flag 當前展示寬度狀態，true:使用最大寬度;false:使用最小寬度。默認是使用最大寬度] * @type {Boolean} */ flag=true, /** * [maxWidth，minWidth 分別是左側的最大和最小寬度] * @type {String} */ maxWidth="200px", minWidth="50px", //左側按鈕容器 btnContainer=doc.querySelector(".toggle-btn"), //左側容器和右側容器，實際上就只需要操作這兩個元素 leftContainer=doc.querySelector(".left"), rightContent=doc.querySelector(".right-content"), /** * 切換寬度大小 * @param {String} width 左側需要顯示的寬度(帶px) */ setToggleLayout=function(width){ leftContainer.style.width=width; leftContainer.style.marginRight="-"+width; rightContent.style.marginLeft=width; }; //初始化先調用一下，根據前面定義的規則，默認顯示最大寬度 setToggleLayout(flag ? maxWidth : minWidth); //點擊按鈕切換大小 btnContainer.onclick=function(){ flag=!flag; setToggleLayout(flag ? maxWidth : minWidth); btnContainer=flag ? "收起" : "展開"; }; 收藏自學
轉自http://imweb.io/topic/57e41631f19a1ca363927b8a