Css left right fixed size of classic layout automatically adapts

A recent study classical layout, the left or right fixed width, the width of the other side of the adaptive, such layout quite common, especially as the background, most of this structure, such as ordering further class APP, when entering the business, there will be a list of a bunch of rice, rice is the classification of the left, the right is a list of food and so on. Anyway, very practical, worth collecting!

Look at the HTML code

<!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 code

*{
    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;
}

Click to view results

You can try changing your browser window, you will find, no matter how to change the size, is always this layout. With this rule, a dynamic effect can be realized, there is such a scenario:
the left which put a button, by clicking on this button to switch the size of the width of the left side. When the left side is narrowed, widened automatically right; widened when the left and right automatic narrowing below what is achieved:
JS codes, before, annotation requires the following three lines of code css

.left{
    position:relative;
    float:left;
    /* width:200px; */
    height: 100%;
    /* margin-right:-200px; */
    background: red;
}
.right-content{
    /* margin-left:200px; */
    height: 100%;
    background: blue;
}

In fact, these three lines I had won the bid in the comments clear, are the core values 1,2,3.
(I did not write the implementation of the following window.onload, be sure to put the dom) javascript

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 ? "收起" : "展开";
};

Click to view the effect of
the complete code of
fact, this is simply a package, you can use jQuery Animate jQuery plug-ins can also be written.
Best Original Game Cold official blog

This article is reproduced in: Ape 2048 https://www.mk2048.com/blog/blog.php?id=hh22011ia0j

Guess you like