Home > Developer > Web Develop
in order to solve the middle width adaptive, the left and right column fixed width, the first appearance is the Holy Grail layout, the double wing layout is the improvement of the Holy Grail layout, the same
The advantage of layout is that documents in the middle column can be rendered preferentially.
1. What is the Holy Grail layout
In fact, for the Holy Grail layout, the front part is exactly the same as the double wing layout.
<style>
. column {float: Left
}
. Container {Width:%
}
. column {Height:px;
}
#center_panel {Width:%;
Background-color:Red;
}
#right_panel {Width:px;
margin-left:-;
Background-color:Green;
}
#left_panel { width:px;margin-left:-px;
Background-color:green; } </Style>
<body>
<class="container">
<class=id="Center_panel"></div>
<class=id="Right_panel"></div>
<class=id="Left_panel"></div>
</Div></body></HTML>
In this way, the middle width is generally adaptive, the left and right widths are constant, but at the same time there is a problem, the middle panel
Department content is obscured by a fixed-width layer on the left and right.
The two-wing layout and the Grail layout are different if the solution to the middle layer is obscured.
2. How the Grail layout solves the middle layer being obscured
The Grail layout solves this problem by padding, because the fixed width on the left is 300px, and the fixed column on the right is 300px in width;
We imagined that we could use padding-left:300px;padding-right:300px to solve the problem, but we found that if
Simple set-up
. container{padding-left:300px;
paddding-right:300px;
}
The effect is:
We found that the left and right two columns will also have padding value, in order to reach the middle layer is not covered, and the left two columns do not have padding, here we for the left side column, the implementation of relative positioning relative;
The settings are as follows:
#right_panel { Width:px;
margin-left:-;
Background-color:Green;
position relative;
left:-px; }
#left_panel{Width:px;
margin-left:-px;
Background-color:green;
relative;
left:-px;
}
As a result, we have achieved the Grail layout, and the left and right columns will not overwrite some of the contents of the middle column, as follows:
3. How to solve the middle part is covered by the double wing Layout method
A method of solving the middle-layer overlay with double-winged layout
It is simple to add a div to this layer of center_panel and set this
Div for
<Divclass="Container"> <Divclass="column"Id="Center_panel"> <DivId="Center_child_panel"></Div> </Div> <Divclass="column"Id="Right_panel"></Div> <Divclass="column"Id="Left_panel"></Div> </Div>
and set:
#center_child_panel{Margin-left:+px;margin-right:px; }At this point, we have implemented the threesome layout to solve the middle layer is covered by the left and right side column, the effect is as follows:
The Grail layout in CSS, and the difference between the Holy Grail layout and the dual wing layout
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
