Home > Developer > JavaScript
DIV + CSS Adaptive Layout, divcss adaptive
Adaptive Layout can be divided into two types: height and width. There are many methods. I use three columns for layout examples. I have a few simple examples and I understand three columns, the principles of the two columns are the same.
As follows: height adaptive-width adaptive
1. Highly Adaptive Layout
The principle is to set each module to absolute positioning, and then set the top and bottom attribute values of the adaptive module in the middle to the height of the header module and the bottom module, respectively, then the height of the intermediate module is adaptive. The Code is as follows:
Html code:
<Body> <div class = "top"> 120px </div> <div class = "main"> adaptive </div> <div class = "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; // do not miss width: 100%; height: 120px; background-color: greenyellow ;}
2. Adaptive width. There are three methods: absolute positioning; margin, intermediate module rendering first; self-floating.
A. Use absolute positioning to set the adaptive width layout. Principle: For the adaptive module, use absolute positioning. Set left and right to the width of the left and right columns. In fact, the principle is the same as that of height self-adaptation, the other two columns are left and right.
Html code:
<Body> <div class = "left"> 200px </div> <div class = "main"> adaptive </div> <div class = "right"> 200px </ div> </body>
Css code:
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. Adaptive three-column layout for priority rendering in the middle column. The key to priority rendering (loading) is that the content must be placed in front of html. The adaptive div must be placed before left and right and included in a parent div. The parent div, left, and right modules both float to the left, and then set margin: 0 200px for the adaptive div (that is, the Child div in the parent div, then, set the value of the left margin-left attribute to a negative value of 100%, that is, margin-left:-100%. Set the value of the right margin-left attribute to a negative value of its own width, it is margin-left:-200px.
Note: The adaptive div must be placed before left and right and included in a parent div.
Html code:
<Body> <div class = "main"> <! -- Clear, here we use a parent div to wrap --> <div class = "content"> adaptive </div> <div class = "left"> 200px </div> <div class = "right"> 200px </div> </body>
Css code:
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. floating by itself. Principle: Set the margin attribute in the middle column to float the left and right columns respectively. Note: If you use this method to deploy Adaptive Layout, you must put the adaptive column behind left and right in html.
Html code:
<Body> <div class = "left"> 200px </div> <div class = "right"> 200px </div> <div class = "main"> adaptive </ div> </body>
Css code:
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;}
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
