成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css經(jīng)典布局之左側固定大小右側自動適應

GraphQuery / 2345人閱讀

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

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

先看HTML代碼



    
        
        
        
        左側固定，右側自適應
    
        
        
左側固定，右側自適應布局

        

            

                左側定寬左側定寬左側定寬左側定寬左側定寬左側定寬
            

            

                

                    右側自適應,這是會自動換行的換行的換行的發(fā)動發(fā)動發(fā)扥扥這是會自動換行的換行的換行的發(fā)動發(fā)動發(fā)扥扥這是會自動換行的換行的換行的發(fā)動發(fā)動發(fā)扥扥這是會自動換行的換行的換行的發(fā)動發(fā)動發(fā)扥扥

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;/* 數(shù)值核心1 */
    height: 100%;
    margin-right:-200px;/* 數(shù)值核心2 */
    background: red;
}
.right{
    float:right;
    width:100%;
    height: 100%;
    background: pink;
}
.right-content{
    margin-left:200px;/* 數(shù)值核心3 */
    height: 100%;
    background: blue;
}

點擊查看效果

你可以嘗試改變你的瀏覽器窗口，會發(fā)現(xiàn)，不管怎么改變大小，始終都是這種布局。有了這個規(guī)律，便可以實現(xiàn)一種動態(tài)效果，比如有一種場景：
左側里面放一個按鈕，通過點擊這個按鈕，來切換左側的寬度大小。當左側變窄時，右側自動變寬；當左側變寬時，右側自動變窄，下面來實現(xiàn)一下：
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;
}

其實這三行我已在注釋中標明了，分別是數(shù)值核心1，2，3.
javascript(我沒有寫window.onload，請務必放到dom的下面執(zhí)行)

var doc=document,

    /**
     * [flag 當前展示寬度狀態(tài)，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;
    };

//初始化先調(diào)用一下，根據(jù)前面定義的規(guī)則，默認顯示最大寬度
setToggleLayout(flag ? maxWidth : minWidth);

//點擊按鈕切換大小
btnContainer.onclick=function(){
    flag=!flag;
    setToggleLayout(flag ? maxWidth : minWidth);
    btnContainer.innerHTML=flag ? "收起" : "展開";
};

點擊查看效果
查看完整代碼
其實這只是簡單的封裝，你可以使用jQuery加入動畫，還可以寫成jQuery插件等。
賽冷思原創(chuàng)官方博客

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50070.html

相關文章

  • css經(jīng)典布局之左側固定大小右側自動適應

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

    Carbs 評論0 收藏0

  • css經(jīng)典布局之左側固定大小右側自動適應

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

    booster 評論0 收藏0

  • 2種方法實現(xiàn)經(jīng)典的左側固定寬度200px，右側自適應寬度的布局

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

    raise_yang 評論0 收藏0

  • CSS布局十八般武藝都在這里了

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

    includecmath 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<