Home > Developer > JavaScript
The holy land layout and the dual-flying wing layout, the holy land layout and the flying wing
The holy cup layout and dual-flying wing layout are mainly used to solve the following problems:
1. Three-column layout, fixed width on both sides, adaptive in the middle. 2. The intermediate bar loads rendering preferentially in the browser.
Solution:
First, write the div in the middle to the front, then the left side, and then the right side. In this way, the second problem is solved, and the div in the middle is preferentially rendered.
However, there will be a problem, and the previous ones will be displayed in front.
To solve this problem, let all three columns float. Set the width of the middle column to 100%.
At this time, the middle column is in the first row, and the left and right are in the second row. In this case, you only need to move the left column to the left of the center and the right column to the right of the center. We add a fixed width to the left and right sides, for example, 150px.
Then add a negative margin to the left column, margin-left:-100%, and a negative margin-left:-150px to the right column;
The layout of the three columns has been formed. However, the problem is that the content of the middle div is blocked. To solve this problem, there are different ways of thinking in the layout of the holy cup and the layout of the wings.
The holy land layout first adds a div to the three columns of div. We can use the semantic Tag article. After setting the left and right padding-left and padding-right of article, use the relative position: relative layout for the left and right divs. The three columns are indented to the middle. Then add the negative values of right and left to the left and right columns respectively to achieve the goal.
The Code is as follows:
The html code of the holy directory layout:
<Body> <article> <div class = "main"> I am the center </div> <div class = "left"> I am the left </div> <div class = "right"> I am right </div> </article> </body>
Css code for the Holy Grail layout: * {margin: 0; padding: 0;} article {padding-left: 150px; padding-right: 150px ;}. main {background-color: lightblue; width: 100% ;}. left {background-color: yellowgreen; width: 150px; margin-left:-100%; position: relative;/* left:-150px ;*/}. right {background-color: pink; width: 150px; margin-left:-150px; position: relative;/* right:-150px ;*/}. main ,. left ,. right {float: left ;}
The dual-flying wing layout is to create a sub-div inside the middle div for content placement. In this sub-div, use margin-left and margin-right to set a position for the left and right columns.
The Code is as follows:
Dual-flying wing layout html code: <body> <div class = "main"> <div class = "inside"> I am in the middle </div> <div class = "left"> I am left </div> <div class = "right"> I am right </div> </body>
Css code for dual-flying wing layout: * {margin: 0; padding: 0 ;}. main {background-color: lightblue; width: 100% ;}. inside {margin-left: 150px; margin-right: 150px ;}. left {background-color: yellowgreen; width: 150px; margin-left:-100% ;}. right {background-color: pink; width: 150px; margin-left:-150px ;}. main ,. left ,. right {float: left ;}
Next, if we want to set the height of the three columns, we can add the attribute padding-bottom: 9999px; margin-bottom:-9999px; To pull the three columns to an infinite length. Add the overflow: hidden; attribute to the article label outside the three columns.
Ending.
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
