In the WebFront-end project development (http://www.maiziedu.com/course/web-px/), the browser will usually be self-adaptive layout, adaptive layout divided into two categories: height and width, there are a lot of methods, I use three columns layout example, I have a few easy-to-understand examples of Bai, understand the three columns of the principle of the same, hehe. As follows: Highly adaptive--width self-adapting1,highly self-adapting layoutsThe principle is to set each module to absolute positioning, and then set the intermediate adaptive moduleTopand theBottomThe value of the property is the height of the head module and the bottom module, respectively, and the height of the intermediate module is adaptive. The code is as follows:HtmlCode:<body> <div class= "Top" > 120px </div> <div class= "main" > Adaptive </div> <div class= "Bottom" > 120px </div></body>cssCode:. top{width:100%; height:120px; Position:absolute; Background-color:greenyellow; }.main{Position:absolute; width:100%; top:120px; bottom:120px; Background-color:azure; Height:auto;}. bottom{Position:absolute; bottom:0;//don't miss it.width:100%; height:120px; Background-color:greenyellow;} 2,width Adaptive, there are three methods, respectively, using absolute positioning;margin, the intermediate module is rendered first and floats itself. A, using absolute positioning to set the width of the adaptive layout, the principle: the use of absolute positioning for the adaptive module, in the Leftand the Rightset to the left and right two columns of the width, in fact, the principle and height adaptive, the other left and right two columns floating around. HtmlCode:<body> <div class= "left" > 200px </div> <div class= "main" > Adaptive </div> <div class= "right" > 200px </div></body>cssCode:html,body {margin:0; height:100%; padding:0; font-size:30px; font-weight:500; Text-align:center;}. left,.right {width:200px; Display:inline; height:100%; Background-color:greenyellow;}. Left {float:left;}. right {float:right;}. Main {position:absolute; left:200px; right:200px; height:100%; Background-color:azure; Display:inline;} B, an adaptive three-column layout with priority rendering in the middle column, the key to rendering (loading) Priority: Content inHTMLIt must be put in front. Self-adaptingDivmust be placed in Leftand the Rightprevious and contained in a parentDivin. ParentDiv, Leftand the RightThe modules are floating to the left, and then the adaptiveDiv(that is, the FatherDivin the sonDiv) Settingsmargin:0 200px, and then to Leftof theMargin-leftThe property value is set to100%The negative number, isMargin-left:-100%; to Rightof theMargin-leftis set to a negative number of its own width, which isMargin-left:-200px. Note: self-adaptingDivmust be placed in Leftand the Rightprevious and contained in a parentDivin. HtmlCode:<body> <div class= "main" > <!--See clearly, here with a FatherDivWrap -<div class= "Content" > Adaptive </div> </div> <div class= "left" > 200px </div> <div class= "right" > 200px </div></body>cs SCode:html,body {margin:0; height:100%; padding:0; font-size:30px; font-weight:500; Text-align:center;}. Main {width:100%; height:100%; Float:left;}. Main. content {margin:0 200px; Background-color:azure; height:100%;}. left,.right {width:200px; height:100%; Float:left; Background-color:greenyellow;}. Left {margin-left: -100%;//important}.right {margin-left: -200px;//important}c, self-floating, principle: Intermediate column settingmarginproperty is to put left and right columns floating around. Note: With this method layout adaptive, the Adaptive column must beHTMLplaced in Leftand the Rightback. HtmlCode:<body> <div class= "left" > 200px </div> <div class= ' right ' > 200px </div> <div class= "main" > Adaptive </div></body>cssCode:html,body {margin:0; height:100%; padding:0; font-size:30px; font-weight:500; Text-align:center;}. Main {margin:0 200px; height:100%; Background-color:azure;}. left,.right {width:200px; height:100%; Background-color:greenyellow;}. Left {float:left;}. right {float:right;}
CSS Tutorial: CSS Adaptive Layout method
