css經典佈局之左側固定大小右側自動適應

賽冷思發表於2019-02-16
CSS

最近學習了一種經典佈局，固定左側或右側的寬度，另一側自適應寬度，此種佈局挺常用，尤其是像後臺，大部分都是採用這種結構，還比如像訂餐類的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.innerHTML=flag ? "收起" : "展開";
};

點選檢視效果
檢視完整程式碼
其實這只是簡單的封裝，你可以使用jQuery加入動畫，還可以寫成jQuery外掛等。
賽冷思原創官方部落格

相關文章