Home > Developer > Web Develop
Adaptive layout divided into two categories: height and width, there are a lot of methods, I use three columns layout example, I would like to list a few easy-to-understand examples of Bai, understand the three columns of the principle of the same, oh da.
As follows: Highly adaptive-width adaptive
1, highly adaptive layout
The principle is to set each module to absolute positioning, and then set the middle adaptive module of the top and bottom properties of the value of the head module and the bottom module is high, and then the height of the intermediate module is adaptive. The code is as follows:
HTML code:
<Body> <Divclass= "Top">120px</Div> <Divclass= "Main">Self-adapting</Div> <Divclass= "Bottom">120px</Div></Body>
CSS code:
. 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, with absolute positioning; using margin, the intermediate module is first rendered;
A, with absolute positioning to set the width of the self-adaptive layout, principle: the use of absolute positioning for the adaptive module, the left and right is set to two columns of the width, in fact, the principle and height adaptive, the other left and right two columns floating around.
HTML code:
<Body> <Divclass= "Left">200px</Div> <Divclass= "Main">Self-adapting</Div> <Divclass= "Right">200px</Div></Body>
CSS code:
Html,body{margin:0;Height:100%;padding:0;font-size:30px;Font-weight: -;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 must be placed in front of the HTML. The adaptive div must be placed in front of left and right and contained in a parent div. Both the parent div,left and right modules float to the left, then set the margin:0 200px for the Adaptive Div (the child div in the parent div), and then set the value of the Margin-left property to a negative number of 100%. Is margin-left:-100%, the margin-left property value of right is set to the negative number of its own width, which is margin-left:-200px.
Note: The adaptive div must be placed in front of left and right and contained in a parent div.
HTML code:
<Body> <Divclass= "Main"> <!--look clearly, here's a parent div wrapped - <Divclass= "Content">Self-adapting</Div> </Div> <Divclass= "Left">200px</Div> <Divclass= "Right">200px</Div></Body>
CSS code:
Html,body{margin:0;Height:100%;padding:0;font-size:30px;Font-weight: -;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: The middle column set the margin property, that is, the left and right columns are floating around respectively. Note: With this method layout adaptive, the Adaptive column must be placed behind left and right in the HTML.
HTML code:
<Body> <Divclass= "Left">200px</Div> <Divclass= "Right">200px</Div> <Divclass= "Main">Self-adapting</Div></Body>
CSS code:
Html,body{margin:0;Height:100%;padding:0;font-size:30px;Font-weight: -;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;}
Div+css self-adapting layouts
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
