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

Carbs 發布于2019-08-29 11:21 / 1320人閱讀

摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。

最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。反正挺實用，值得收藏！

先看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插件等。
賽冷思原創官方博客

GPU云服務器云服務器 html表格固定左側 js左側固定導航菜單固定布局 java固定對象布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111589.html

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

摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...

booster 2019-08-21 14:29 評論0 收藏0
css經典布局之左側固定大小右側自動適應

摘要：最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的，進入商家的時候，會出現一堆飯的列表，左側是飯的分類，右側是飯的列表等等。最近學習了一種經典布局，固定左側或右側的寬度，另一側自適應寬度，此種布局挺常用，尤其是像后臺，大部分都是采用這種結構，還比如像訂餐類的APP，進入商家的時候，會出現一堆飯的列表，...

GraphQuery 2019-08-01 15:43 評論0 收藏0
2種方法實現經典的左側固定寬度200px，右側自適應寬度的布局

摘要：今天去面試前端人員，隨即出了一個經典的布局問題，即如標題所示。可是結果令我很驚訝，超過一半的人都沒答對，亦或是只答對一半在此記錄下用兩種方法，第一種普通的方法，第二種是利用布局。 ??????今天去面試前端人員，隨即出了一個經典的布局問題，即如標題所示。可是結果令我很驚訝，超過一半的人都沒答對，亦或是只答對一半！在此記錄下用兩種方法，第一種普通的方法，第二種是利用flex布局。首先...

raise_yang 2019-08-29 12:20 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0