css典范规划之左边牢固大小右边自动顺应

2024年4月14日 126次阅读 来源: 赛冷思

近来进修了一种典范规划，牢固左边或右边的宽度，另一侧自适应宽度，此种规划挺经常运用，尤其是像背景，大部分都是采纳这类构造，还比方像订餐类的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插件等。
赛冷思原创官方博客

    原文作者：赛冷思
    原文地址: https://segmentfault.com/a/1190000006981410
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞