Several common CSS layouts
Summary of this article
This article will introduce the following common layouts:
There are many ways to realize the three-column layout. This article focuses on the Holy Grail layout and the double-wing layout. Several other methods that can be used to achieve a three-column layout
1. A single-column layout
There are two common single-column layouts:
- Single-column layout with equal width of header, content and footer
- A single-column layout with the same width as the header and the footer and a slightly narrower content
How to implement
For the first type, first set width: 1000px for header, content and footer uniformly; or max-width: 1000px (the difference between the two is that when the screen is less than 1000px, the former will have scroll bars, the latter will not, Display the actual width); then set margin:auto to achieve centering.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
For the second type, the content width of the header and footer is not set, and the block-level element fills the entire screen, but the content area of the header, content and footer is set to the same width, and is centered by margin:auto.
<div class="header">
<div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.nav{
margin: 0 auto;
max-width: 800px;
background-color: darkgray;
height: 50px;
}
.content{
margin: 0 auto;
max-width: 800px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
2. two-column adaptive layout
Two-column adaptive layout refers to a layout in which one column is stretched by the content and the other column fills the remaining width.
1. float+overflow:hidden
If it is an ordinary two-column layout, floating + margin of ordinary elements can be achieved, but if it is an adaptive two-column layout, it can be achieved by using float+overflow: hidden . This method mainly triggers BFC through overflow, and BFC does not Will overlap floated elements. Since setting overflow:hidden does not trigger the haslayout property of IE6-browser, you need to set zoom:1 to be compatible with IE6-browser. The specific code is as follows:
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
Note: If the sidebar is on the right, pay attention to the rendering order. That is, in HTML, write the sidebar first and then write the main content
2. Flex layout
Flex layout, also known as flexible box layout, can realize the layout of various pages with just a few lines of code.
//html part same as above
.parent {
display:flex;
}
.right {
margin-left: 20px;
flex:1;
}
3.Grid layout
Grid layout is a grid-based two-dimensional layout system designed to optimize user interface design.
//html part same as above
.parent {
display: grid;
grid-template-columns:auto 1fr;
grid-gap: 20px
}
3. three column layout
Features: Adaptive width of the middle column, fixed width on both sides
1. The Holy Grail Layout
① Features
The special three-column layout is also fixed width on both sides and adaptive in the middle. The only difference is that the DOM structure must be written in the middle column first, so that the middle column can be loaded first .
.container {
padding-left: 220px;
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
<article class="container">
<div class="center">
<h2>Holy Grail Layout</h2>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
② Implementation steps
- All three parts are set to float to the left, otherwise the content on the left and right sides cannot go up, and it is impossible to be in the same row as the middle column . Then set the width of center to 100% ( to achieve adaptive content of the middle column ), at this time, the left and right parts will jump to the next line
- Make the left and right parts return to the same line as the center part by setting margin-left to a negative value
- By setting the padding-left and padding-right of the parent container, leave a gap on the left and right sides.
- By setting relative positioning, let the left and right parts move to the sides.
③ Disadvantages
The minimum width of the center part cannot be smaller than the width of the left part, otherwise the left part will fall to the next line
If the content of one of the columns is elongated in height (as shown in the figure below), the background of the other two columns will not be filled automatically. (It can be solved with positive padding + negative margin of equal height layout, which will be introduced below)
2. Double wing layout
① Features
It is also a three-column layout, which is further optimized on the basis of the Holy Grail layout, which solves the problem of confusion in the Holy Grail layout and realizes the separation of content and layout. And any column can be the top column without problems .
.container {
min-width: 600px;//Ensure that the middle content can be displayed, twice the left width + right width
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
Margin: 0 200px; //Add a new part
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
<article class="container">
<div class="center">
<div class="inner">Double-wing layout</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
② Implementation steps (the first two steps are the same as the Holy Grail layout)
- All three parts are set to float to the left, and then the width of the center is set to 100%. At this time, the left and right parts will jump to the next line;
- Let the left and right parts return to the same line as the center part by setting margin-left to a negative value;
- Add an inner div to the center part, and set margin: 0 200px;
③ Disadvantages
Add an extra layer of dom tree nodes to increase the amount of computation for rendering tree generation .
3. Comparison of two layout implementations:
In both layouts, the main column is placed at the front of the document flow, so that the main column is loaded first.
The two layout methods also have the same implementation, both float three columns, and then form a three-column layout with negative margins.
The difference between the two layout methods is how to deal with the position of the main column in the middle: the
holy grail layout uses the left and right padding of the parent container + the relative positioning of the two slave columns ;
the double wing layout is to nest the main column in a new one . Use the left and right margins of the main column for layout adjustments in the parent block of
4. Equal height layout
Equal-height layout refers to the layout of the child elements in the parent element with the same height. Next, we introduce several common implementation methods:
1. Use positive padding + negative margin
We can solve the second disadvantage of the Holy Grail layout by waiting for the layout, because the background is displayed in the padding area, set a padding-bottom with a large value, set a negative margin-bottom with the same value, and add a value outside all columns. On a container, and set overflow:hidden to cut off the overflow background . It is possible to achieve multi-column equal-height layout, and also to achieve the effect of dividing lines between columns. The structure is simple and compatible with all browsers. The added code is as follows:
.center,
.left ,
.right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.container {
padding-left: 220px;
padding-right: 220px;
overflow: hidden;//Cut off the overflow background
}
2. Use background images
This method is one of the earliest methods we use to achieve equal-height columns, which is to use a background image, and use this background image on the parent element of the column to lay the Y-axis, so as to achieve an illusion of equal-height columns. The implementation method is simple, the compatibility is strong, and it can be easily implemented without too many CSS styles, but this method is not suitable for high-column layouts such as fluid layouts.
Before making the style, you need a background image similar to the following:
<div class=”container clearfix”>
<div class=”left”></div>
<div class=”content”></div>
<div class=”right”></div>
</div>
.container {
background: url("column.png") repeat-y;
width: 960px;
margin: 0 auto;
}
.left {
float: left;
width: 220px;
}
.content {
float: left;
width: 480px;
}
.right {
float: left;
width: 220px;
}
3. Mimic the table layout
This is a very simple and easy to implement method. However, the compatibility is not good, and it does not work properly in ie6-7.
<div class="container table">
<div class="containerInner tableRow">
<div class="column tableCell cell1">
<div class="left aside">
....
</div>
</div>
<div class="column tableCell cell2">
<div class="content section">
...
</div>
</div>
<div class="column tableCell cell3">
<div class="right aside">
...
</div>
</div>
</div>
</div>
.table {
width: auto;
min-width: 1000px;
margin: 0 auto;
padding: 0;
display: table;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
width: 33%;
}
.cell1 {
background: #f00;
height: 800px;
}
.cell2 {
background: #0f0;
}
.cell3 {
background: #00f;
}
4. Use borders and positioning
This approach uses borders and absolute positioning to achieve the effect of a fake equal-height column. Simple structure, compatible with various browsers, easy to master. Suppose you need to implement a two-column equal-height layout, with the sidebar height equal to the main content height.
#wrapper {
width: 960px;
margin: 0 auto;
}
#mainContent {
border-right: 220px solid #dfdfdf;
position: absolute;
width: 740px;
height: 800px;
background: green;
}
#sidebar {
background: #dfdfdf;
margin-left: 740px;
position: absolute;
height: 800px;
width: 220px;
}
<div id="wrapper">
<div id="mainContent">...</div>
<div id="sidebar">...</div>
</div>
5. Adhesion layout
1. Features
- There is a piece of content <main>, when <main>the gaokang is long enough, <main>the element <footer>that follows it will follow the <main>element.
- When the <main>element is relatively short (such as less than the height of the screen), we expect the <footer>element to "stick" to the bottom of the screen
The specific code is as follows:
<div id="wrap">
<div class="main">
main <br />
main <br />
main <br />
</div>
</div>
<div id="footer">footer</div>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;//The height is inherited layer by layer
}
#wrap {
min-height: 100%;
background: pink;
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer {
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
2. Implementation steps
(1) Footer must be an independent structure without any nesting relationship with wrap
(2) The height of the wrap area becomes the viewport height by setting min-height
(3) The footer should use the negative margin to determine his position
(4) The padding-bottom needs to be set in the main area. This is also to prevent negative margins from causing the footer to overwrite any actual content.