foreword
When we browse the page, we often have a CSS layout of three columns on the left, center and right. This is the CSS classic Holy Grail layout and double-wing layout. The left and right sides are fixed, and the middle is adaptive. The effect is as shown below. Next, I will discuss with you the similarities and differences between the Holy Grail layout and the double-wing layout.
Holy Grail Layout Code Analysis
First, let me show you the implementation of the Holy Grail layout.
- The first step is to set the left and right of the outermost container wrap
paddingto200px - In the second step, we render three containers
content, ,letf, and .rightTocontentaddwidthL:100%, let him fill the container,background: green;,height:200px;easy to see the effect. Also setleftbothrightwidth and height to200px. Then set all three boxes to float, that is , to set all thewraplower ones . Next, let's take a look at the effect:divfloat:left
At this point, all we have to do is to move the lower two containers to the upper two blank areas to achieve the rendering effect we want. Then we have to add a relative positioning attribute to the left and right
left, and the rightcontainer to move them up.
- Step 1: We first move the container and add , ,
leftto the container . First pull the container back to the first row, then move 100% left relative to the container (that is, its own width), and then move 200 pixels to the right relative to itself.leftposition: relative;left: -200px;margin-left: -100%;leftcontentcontentleft - Step 2: We move the container and add , ,
rightto the container . Similarly, we will add and move the right position to the left by 200px. After these two steps, we can achieve the same effect as the renderings. This is the so-called Holy Grail layout.rightmargin-left: -200px;position: relative;left: 200px;rihgtposition: relative;left: 200px;
HTML code
<body>
<div class="wrap">
<div class="content">
content
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS code
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
background: green;
height: 200px;
}
.left, .right{
height: 200px;
width: 200px;
background: pink;
}
.wrap div{
float: left;
}
.wrap{
padding: 0 200px;
height: 2000px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
left: 200px;
}
Code Analysis of Double Flying Wing Layout
Next, I will show you the realization of the double-flying wing layout.
-
The first step is the same as the Holy Grail layout, we set the
contentcontainer,leftcontainer, andrightcontainerfloat:leftto float to the left, and setlefttherightheight and width of the sum to200px, setcontentthe width to100%, and set the height to200px, which is more convenient to see the effect. -
The second step is set so
leftthatmargin-left:-100%it coverscontentthe leftmost -
The third step is then set so
rightthatmargin-left：-200pxit is covered oncontentthe right side; let's take a look at the effect:
I can see from the door that although the left and right
left, the rightcontainer has reached the designated position, contentthe content of our container is also covered by the containers on both sides. not achieve the desired effect
- So in the last step, we put
contentanother layer of container ininnerthe container, so that the main content isinnerloaded, so we need to setinnerthemarginleft and right200pxto achieve the same effect as the rendering, which is the double-flying wing layout.
HTML code
<body>
<div class="wrap">
<div class="content">
<div class="ineer">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS code
<style>
*{
margin: 0;padding: 0;
}
.left, .right{
width: 200px;
height: 200px;
background: pink;
float: left;
}
.content{
height: 200px;
background: rgb(45, 173, 75);
float: left;
width: 100%;
}
.ineer{
margin: 0 200px;
height: 200px;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
Similarities and differences
Below we describe the similarities and differences between the two layouts.
- The same: both layouts will set the box to float right, and the order of loading the boxes in HTML is center-left-right, given the 100% width of the middle container so that it can change with the page width. Then overlay the left and right containers over the middle container with the left margin.
- Different: When three containers are pulled to the same row, the holy grail layout is to adjust the position of the left and right containers, move the left and right containers out of the middle container by relative positioning, and at the same time give the outermost container an inner margin to prevent covering the middle container . The double-flying-wing layout is to wrap the middle container with another layer of inner container, and display the content in the inner container instead of the middle container. Then give the inner layer a padding so that the content will not be blocked by the left and right containers.
summary
The effect achieved by the Holy Grail layout and the double-wing layout is the same, but when the left and right containers are covered in the middle container, the containers handled are different. When dealing with left and right containers, the Holy Grail layout should pay attention to the opposite direction of left and right translation when using relative positioning. Pay attention to the padding of the inner container when dealing with the middle container in the double-wing layout.