Home > Developer > Web Develop
Recently learned a classic layout, fixed to the left or right of the width, the other side of the adaptive width, this kind of layout is very common, especially like backstage, most of them are used this structure, also such as the ordering of food applications, when entering the merchant, there will be a list of rice, the left is the classification of rice, the right is a list of It's very practical, it's worth collecting!
Look at the HTML code first
<!doctype html>
CSS Code
*{margin:0;padding:0;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; Box-sizing:border-box;} /* Two column right-hand adaptive layout */.left-fixed_right-auto{width:100%;height:200px;clear:both;display:inline-block;margin-top:20px;}. left{position:relative;float:left;width:200px;/* Numeric core 1 */height:100%;margin-right:-200px;/* numeric Core 2 */background:red ;}. Right{float:right;width:100%;height:100%;background:pink;}. right-content{margin-left:200px;/* Numeric Core 3 */height:100%;background:blue;}
Click to view Effects
You can try to change your browser window, and you will find that the layout is always the same regardless of the size of the change. With this rule, you can achieve a dynamic effect, such as a scenario:
Put a button on the left side and click this button to toggle the width to the left. When the left side narrows, the right side automatically widens, and when the left side becomes wider, the right side automatically narrows and the following is implemented:
JS code, before this, you need to comment the following three lines of code in the 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 have in the comments are clear, respectively, the numerical core of three.
JavaScript (I did not write window.onload, please be sure to put it under the DOM execution)
var doc=document, /** * [flag Current display width state, true: use maximum width; false: Use minimum width. The default is to use the maximum width] * @type {Boolean} * /flag=true, /** * [Maxwidth,minwidth respectively is the maximum and minimum width on the left] * @type { String} */ maxwidth= "200px", minwidth= "50px", ///Left button container btncontainer=doc.queryselector (" . Toggle-btn "), //left container and right container, actually only need to manipulate these two elements leftcontainer=doc.queryselector (". Left "), Rightcontent=doc.queryselector (". Right-content"), /** * Toggle Width Size * @param {String} width The left side needs to display the width (with px) */ settogglelayout=function (width) { leftcontainer.style.width=width; Leftcontainer.style.marginright= "-" +width; rightcontent.style.marginleft=width; };/ /Initialize first call, according to the rules defined above, the default display maximum width settogglelayout (flag maxwidth:minwidth);//Click the button to toggle the size btncontainer.onclick=function () { Flag=!flag; Settogglelayout (flag maxwidth:minwidth); Btncontainer.innerhtml=flag? "Close": "Unfold";};
Click to view Effects
Click to view full code
In fact, this is just a simple package, you can use jquery to add animations, you can also write jquery plug-ins and so on.
Personal Official Blog: Salenth personal blog
CSS Classic layout left fixed size right auto fit
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
