Foreword: I always see three columns layout in the CSS test points of some seniors’ interview posts, and I think this thing should be quite important. Just when the teacher recently talked about this, I will write a post in class to record it and deepen my impression. At the same time do share, hope to discuss with you.
To achieve a three-column layout, we can use the classic float and position properties (both of which have drawbacks), or we can use the Holy Grail layout and the two-wing layout. I’ll go through the implementation and features of each of these layouts.
Note: this paragraph is a supplement to the main text written by the editor: it enriches the cover diagram after writing, which is equivalent to the mind map of the full text, hoping to help readers read it. This paper uses a lot of maps, takes a long time, may write when thinking tired. If there is something wrong, I hope you can point it out! Thank humbly!
Several ways to achieve a three-column layout
Float layout
The specific implementation
This is the CSS style
* {margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
#left.#right{
width: 200px;
height: 200px;
background: red;
}
#middle{
height: 200px;
background: green;
}
#left{
float: left;
}
#right{
float: right;
}
Copy the codeCSS is nothing special, but HTML is
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="middle">
middle
</div>
Copy the codeNote: Middle is placed last because it is removed from the document flow after the left and right float properties are set. If you put middle in the middle, it looks like this:
Drawbacks of float layouts:
We know from previous studies that the float genus is used to implement text around an image. If there is a lot of text, the layout will be messy and the overall page will look ugly, like this:
summary
We generally don’t use float because of its nature
Position
The specific implementation
In my classic layout, the idea is similar to that of a floating layout, but with the position property
Concrete implementation:
- Left and right sides fixed width, set margins, and set absolute positioning;
- The middle element ADAPTS and sets margin to the width of the left and right elements;
<div id="left">
left
</div>
<div id="middle">
middle
</div>
<div id="right">
right
</div>
Copy the codeThen there is the CSS style:
* {margin: 0;
padding: 0;
}
body{
width: 100%;
height: 500px;
}
#left.#right{
width: 200px;
height: 100%;
background: pink;
}
#left{
position: absolute;
left: 0;
top: 0;
}
#right{
position: absolute;
right: 0;
top: 0;
}
#middle{
margin: 0px 200px;
}
Copy the codeDisadvantages of locating layouts
When a scrollbar appears, the content area is displayed behind the scrollbar, and the content area is compressed like this:
summary
This approach is not recommended for a three-column layout due to scrollbar issues
The holy grail layout
The Holy Grail layout, as long as we make the middle content adaptive, the middle content first render, and the two sides fixed, is fine.
There are a lot of details to pay attention to in the Grail layout!
The specific implementation
<div class="wrap">
<div id="header">
header
</div>
<div id="content">
<div id="middle">
<p>middle</p>
<p>middle</p>
<p>middle</p>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div id="footer">
footer
</div>
</div>
Copy the codeThe HTML box is distributed as above. Notice here that the middle is in front, rendering ahead of time
Then set the outer styles:
* {margin: 0;
padding: 0;
}
.wrap{
min-width: 600px;
}
#header.#footer{
height: 50px;
width: 100%;
background: grey;
}
Copy the codeNext set the internal style:
Here’s how to use overflow: hidden; Solve!
I first set left center right to float left, which looks like this:
You can see that the element below the content has moved up.
Then, I set Overflow: Hidden for content (the left-center container);
#middle.#left.#right{
float: left;
}
#content{
overflow: hidden;
padding: 0 200px;
}
Copy the codeNow it looks like this:
There was a delay. Go ahead. Continue to set the left, middle and right styles
#middel{
width: 100%;
background: green;
}
#left.#right{
width: 200px;
height: 200px;
background: pink;
}
Copy the codeNow it will look like this:
And then I’m going to put left and right
#left{
margin-left: -100%;
position: relative;
left: -200px;
}
#right{
margin-left: -200px;
position: relative;
right: -200px;
}
Copy the codeAchieve the end result
Here is a detailed description of the final effect using the left section (note, brothers, because position: relative; , margin-left and left are moved to the original position) :
Put in a copy of the complete CSS code
* {margin: 0;
padding: 0;
}
.wrap{
min-width: 600px;
}
#header.#footer{
height: 50px;
width: 100%;
background: grey;
}
#middle.#left.#right{
float: left;
}
#content{
overflow: hidden;/ * * / landing the container
padding: 0 200px;
}
#middle{
/* Inherit 100% of the conten width */
width: 100%;
background: green;
}
#left.#right{
width: 200px;
height: 200px;
background: pink;
}
#left{
/* move to the far left of content */
margin-left: -100%;
/* Relative positioning does not leave the document flow */
/* left */
position: relative;
left: -200px;
}
#right{
/* The left section has been moved, but right is written after left in HTML, so it appears on the right side of content */
margin-left: -200px;
position: relative;
right: -200px;
}
Copy the codePay attention to
In the Holy Grail layout, text will overflow if there is too much content in one column.
#middle.#left.#right{
float: left;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
Copy the codeAnd here it is:
summary
In my opinion, the layout of the Holy Grail is not a problem, as long as there is too much content
Twin wing layout
The specific implementation
First put the HTML:
<body>
<div class="wrap">
<div id="header">
header
</div>
<div id="content">
<div id="middle">
<div class="middle-inner">
middel
</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div id="footer">
footer
</div>
</div>
Copy the codeAs you can see, the twin wing layout and the Grail layout are roughly the same. But! Notice the middle-inner container, and you’ll see its special use later.
Then CSS:
* {margin: 0;
padding: 0;
}
.wrap{
min-width: 600px;
}
#header.#footer{
height: 50px;
width: 100%;
background: grey;
}
#left.#right{
width: 200px;
height: 200px;
background: green;
}
#middle{
background: blue;
width: 100%;
height: 200px;
float: left;
}
#content{
overflow: hidden;
}
#left{
float: left;
/* Over Middle. At the front left of the page */
margin-left: -100%;
}
#right{
float: left;
margin-left: -200px;
}
.middle-inner{
margin: 0 200px;
}
Copy the codeSince the method is similar to the Grail layout, I won’t break it down.
Here I would like to mention a few points through the idea of the double-flying wing layout: the double-flying wing layout is said to be proposed by Yubo, which is to put the bird’s body (middle part) first, and then put the wings (left and right part) in the appropriate position.
Then I’ll make it simple with two diagrams:
And then you’ll notice that the contents of middle are missing
And it worked!
summary
I don’t see any drawbacks to the two-wing approach, guys can prioritize the three-column layout (or if you know of any points to consider, let me know in the comments).
conclusion
After writing for so long, I have finally written down several ways to achieve a three-column layout. In general: the first two classical layouts have their own defects, use should be careful, the last two will be relatively optimal solution, the use of priority.