Foreword: When it comes to these two layouts, the first thing we think of is that the three boxes should be placed side by side in a row, and the middle box is self-adaptive. At this point you must have imagined things in mind. The way I think about the layout of the Grail is the cup, and if you look at the cup, you’ll see that it has a big torso in the middle, and one ear on each side. Is it similar to a human head? Today I reviewed the two layouts and compared them.
1. Grail layout
We all know that the Holy Grail layout is three boxes side by side, so let’s start with three boxes
<div class="box"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div>
Copy the code.main,.left,.right{ min-height: 100px; } .main{ width: 100%; background-color: red; } .left{ background-color: yellow; width: 300px; } .right{ background-color: blue; width: 200px; }Copy the codeAs you can see, the boxes are defined with the block-level div element, resulting in three boxes on a single row.
For those of you who are familiar with CSS, display: Flex is a flexible layout that allows you to display boxes in one box, but there is no way to make the left stick to the left and the right stick to the right. Let’s see what happens when we add display:flex to the outermost container.
.box{ display: flex; }Copy the code
You’ll notice that the boxes are written in order of structure, so display: Flex still doesn’t have the desired effect.
How do I put left on the left and right on the right of main
First of all, we leave a certain inner margin on the left and right sides of the largest box. This inner margin is the width of the left and right boxes to be placed later
.box{ padding: 0 200px 0 300px; }Copy the code
Seeing that the left and right sides of the box are left with inner margins, let’s try to make the box occupy the space on the left and right sides of Main. The first thing we’re going to think about is floats, left floats, and we all know that floats leave the document flow.
.main,.left,.right{ float: left; min-height: 100px; }Copy the codeWe’ll notice that only the right seems to go up to the right of the left.
How do we get row 2 to go to row 1? And that’s when we think about positioning, or relative positioning, because relative positioning, relative positioning is relative to the initial position of the element in the document
.main,.left,.right{ position: relative; float: left; min-height: 100px; }Copy the code
You’ll notice that you haven’t changed anything. And that’s when we think about maigin-left
.box{ padding: 0 200px 0 300px; } .main,.left,.right{ position: relative; float: left; min-height: 100px; } .main{ width: 100%; background-color: red; } .left{ background-color: yellow; width: 300px; margin-left: -100%; } .right{ background-color: blue; width: 200px; margin-left: -200px; }Copy the code
We see that they’re all on the same line, but if you look carefully you’ll notice that the word “main” is missing, because it’s hidden by the left. In addition to “main”, you’ll notice an air raid on the left and on the right, and then we can figure out how much to move them to the left and to the right, It’s essentially the width of each of its own which is the inside distance of the largest container
.box{ padding: 0 200px 0 300px; } .main,.left,.right{ position: relative; float: left; min-height: 100px; } .main{ width: 100%; background-color: red; } .left{ background-color: yellow; width: 300px; margin-left: -100%; left: -300px; } .right{ background-color: blue; width: 200px; margin-left: -200px; right: -200px; }Copy the code
This is the Holy Grail layout, with adaptive content in the middle and fixed on both sides. Below is the complete code
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="Width = device - width, initial - scale = 1.0"< span style>. Box {padding: 0 200px 0 300px; } .main,.left,.right{ position: relative;float: left; min-height: 100px; } .main{ width: 100%; background-color: red; } .left{ background-color: yellow; width: 300px; margin-left: -100%; left: -300px; } .right{ background-color: blue; width: 200px; margin-left: -200px; right: -200px; } </style></head><body> <div class="box"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div></body></html>Copy the code2. Dual-wing layout
<div id="container">
<div id="main" class="col">
<div id="main-wrap"></div>
</div>
<div id="left" class="col"></div>
<div id="right" class="col"></div>
</div>Copy the codeAs can be seen from the structure, there is one more box in main than the Grail, which is to solve the problem of hiding the contents behind.
.col {float: left; }#main {width: 100%; height: 400px; background-color: yellow; }
#main-wrap {margin: 0 190px 0 190px; }
#left {width: 190px; height: 400px; margin-left: -100%; background-color: #0000FF; }
#right {width: 190px; height: 400px; margin-left: -190px; background-color: #FF0000; }Copy the codeBy contrast, the Grail layout sets the inner margin in the outermost container, while the twin wings layout sets the outer margin in the box inside the main. It can also be found that there is no positioning for the three boxes, let alone left floating.
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="Width = device - width, initial - scale = 1.0"> < span style> body {min-width: 550px; } .col {float: left; } #main { width: 100%; height: 400px; background-color: yellow; } #main-wrap { margin: 0 190px 0 190px; } #left { width: 190px; height: 400px; margin-left: -100%; background-color: #0000FF; } #right { width: 190px; height: 400px; margin-left: -190px; background-color: #FF0000; }
Copy the code
Conclusion: Comparing the two layouts, we can find that the twin wing layout is simpler than the Holy Grail layout, and the twin wing layout is more compatible