Grail layout
Requirements:
1. Fixed width and height on both sides, adaptive in the middle.
2. For the three column layout, the middle column is loaded and rendered first.
Technique: negative value of float + position + margin left
DOM structure
<div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div>
Initial CSS Style
.main{
width: 100%;
height: 20px;
background-color: red;
}
.left{
width: 200px;
height: 20px;
background-color: green;
}
.right{
width: 200px;
height: 20px;
background-color: pink;
}
effect:
The Grail layout began to be realized
1. Make main, left and right line up, and add float:left. Since the main width accounts for 100%, the left and right will be squeezed down.
effect:
2. You should know that the main in the middle of the Holy Grail layout will not contain left and right, so first add padding:0 200px; to the container;, Make room for left and right. Because floating will cause the height of the parent element to collapse, so that the parent element cannot calculate the corresponding height, add overflow:hidden to the container;
effect:
3. The reason why left and right are below main is that the width of main accounts for 100% and is squeezed down. It can be imagined that left and right are behind main.
effect:
So, add margin left to left: - 100%;, Move left to the front of main. Add margin left to right: - 200px;, Let right move forward 200px.
effect:
4. Use positioning to put left and right on both sides and add position:relative to left; Right: 200px, add position:relative to right; Left: 200px, because position:relative; It is positioned relative to the original position.
effect:
All codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
padding:0 200px;
overflow: hidden;
}
.main {
width: 100%;
height: 20px;
background-color: red;
float: left;
}
.left {
position: relative;
right: 200px;
width: 200px;
height: 20px;
background-color: green;
float: left;
margin-left: -100%;
}
.right {
position: relative;
left:200px;
width: 200px;
height: 20px;
background-color: pink;
float: left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
Dual wing layout
Requirements:
1. Fixed width and height on both sides, adaptive in the middle.
2. For the three column layout, the middle column is loaded and rendered first.
Technique: negative value of float + margin left
DOM structure
<div class="container"> <div class="main">main</div> </div> <div class="left">left</div> <div class="right">right</div>
Initial CSS Style
.container{
background-color: red;
width: 100%;
height: 20px;
}
.left{
background-color: blue;
width: 100px;
height: 20px;
}
.right{
background-color: pink;
width: 100px;
height: 20px;
}
effect:
The dual wing layout began to be realized
1. Make main, left and right line up, and add float:left. Since the main width accounts for 100%, the left and right will be squeezed down.
effect:
2. Use main to make room for left and right. Set margin: 0 100px for main;
effect:
3. It also uses the negative value of margin left to move left and right to the corresponding position.
effect:
summary
Similarities
(1) The layout is similar, which is a three column layout to achieve specific requirements.
(2) Both use float floating to separate from the document flow to the left, float the left, middle and right columns, and form a three column layout through the parent outer margin.
Differences
(1) Different implementation methods:
The Holy Grail layout is to build a layout through float + margin to make the layout of three columns on one row + relative relative positioning and position adjustment.
The double wing layout is through float + margin, without relative positioning.
(2) How to handle the position of two columns:
The Holy Grail layout is to add padding to the external container and locate both sides through relative positioning.
The double wing layout is to squeeze out the position to left and right by main and margin