This article summary
This article covers the following common layouts:
There are many ways to realize the three-column layout. This paper focuses on the Grail layout and the double-flying wing layout. Several other methods that can be used to implement a three-column layout
One, single column layout
There are two common single-column layouts:
- Single column layout with header, Content, and Footer width
- Header and footer are the same width, and the content is narrow in a single column
1. How to achieve it
For header,content, and footer, set width: 1000px; < span style = “max-width: 1000px; Then set margin: Auto to center.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Copy the code.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;
}
Copy the codeIn the second case, the content width of header and footer is not set. Block-level elements fill the entire screen, but the content area of 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>
Copy the code.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;
}
Copy the codeTwo, two column adaptive layout
A two-column adaptive layout is a layout in which one column is spread out by the content and the other column fills the remaining width
1.float+overflow:hidden
For a normal two-column layout, floating + plain element margin is possible, but for an adaptive two-column layout, float+ Overflow: Hidden is possible, which triggers the BFC primarily through overflow, and the BFC does not overlap the floating elements. Since setting Overflow: Hidden does not trigger the IE6- browser’s HasLayout property, you need to set Zoom :1 to be compatible with IE6-. 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>
Copy the code.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
Copy the codeNote: If the sidebar is on the right, pay attention to the rendering order. In HTML, you write the sidebar first and then the main content
2. The Flex layout
A Flex layout, also known as an elastic box layout, allows you to layout a variety of pages in a few lines of code.
Parent {display:flex; } .right { margin-left:20px; flex:1; }Copy the code3. The grid layout
Grid layout, is a two-dimensional layout system based on Grid, the purpose is to optimize the user interface design.
Parent {display:grid; grid-template-columns:auto 1fr; grid-gap:20px }Copy the codeThree, three column layout
Features: adaptive width of middle column, fixed width of side and side
1. Grail layout
(1) the characteristics of
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; // Make space for the left and right columns } .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;
}
Copy the code <article class="container">
<div class="center"> <h2> Grail layout </h2> </div> <div class="left"></div>
<div class="right"></div>
</article>
Copy the code② Implementation steps
- Three parts are set for the left float, otherwise the left and right sides of the content can not go up, it is impossible to row with the middle. Then set the width of center to 100%(for the middle column content to be adaptive), and the left and right sections jump to the next line
- Return the left and right sections to the same line as center by setting margin-left to a negative value
- Padding-left and padding-right leave a gap between the left and right sides by setting the padding-left and padding-right sides of the parent container.
- Move the left and right parts to the sides by setting relative positioning.
(3) shortcomings
- 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 one column is highly elongated (see figure below), the background for the other two columns is not automatically filled in. (It can be solved by using positive padding+ negative margin of contour layout, which will be introduced below)
2. Dual-wing layout
(1) the characteristics of
It is also a three-column layout, which is further optimized on the basis of the Layout of the Grail, to solve the problem of the layout disorder of the Grail, and to achieve the separation of content and layout. And any column can be the highest column, no problem.
.container { min-width: 600px; }.left {// Make sure the middle content is displayed, double 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 section}.right {float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
Copy the code <article class="container">
<div class="center">
<div class="inner"</div> <div class="left"></div>
<div class="right"></div>
</article>
Copy the code② Implementation steps (the first two steps are the same as the Grail layout)
- All three sections float left, then set the width of center to 100%, and the left and right sections jump to the next line.
- Return left and right to the same line as center by setting margin-left to a negative value;
- Add an inner div to the center section and set margin: 0 200px;
(3) shortcomings
Add a layer of DOM tree nodes to increase the computation of rendering tree generation.
3. Comparison of the two layout implementation methods:
- Both layouts place the main column first in the document flow, making the main column load first.
- The two layouts have similar implementations in that they float three columns and then create a three-column layout with a negative margin.
- The difference between the two layouts is how to deal with the position of the main column in the middle: The Grail layout uses the left and right inner margins of the parent container + two relative positioning of the slave columns; In a two-wing layout, the main column is nested in a new parent block using the left and right margins of the main column for layout adjustment
Four, contour layout
An isometric layout is a layout in which the children are the same height as their parents. Here are some common implementations:
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, then set a negative margin-bottom with the same value, and add a container around all the columns. And set Overflow: Hidden to cut out the overflow background. It is possible to achieve a multi-column height layout, and also to achieve the effect of separating lines between columns, simple structure, compatible with all browsers. Add the following code:
.center, .left, .right { padding-bottom: 10000px; margin-bottom: -10000px; } .container { padding-left: 220px; padding-right: 220px; overflow: hidden; // Cut out the overflow background}Copy the code
2. Use background images
This method is one of the earliest methods used to realize contour columns. It is to use the background image to lay the Y-axis on the parent element of the column, so as to realize the illusion of contour columns. The implementation method is simple and compatible, and can be easily implemented without much CSS style, but this method is not suitable for high column layouts such as fluid layouts.
To make the style, you need a background image like this:
<div class= "left" ></div> <div class= "content" ></div> <div class= "right" ></div> </div>Copy the code.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;
}
Copy the code3. Mimic a table layout
This is a very simple, easy-to-implement approach. However, it is not compatible with Internet Explorer 6-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>Copy the code.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;
}
Copy the code4. Use borders and positioning
This method uses borders and absolute positioning to achieve the effect of a false equal-height column. Simple structure, compatible with all browsers, easy to master. Suppose you want to implement a two-column layout with the same height as the main content.
#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;
}
Copy the code<div id="wrapper">
<div id="mainContent">... </div> <div id="sidebar">... </div> </div>Copy the codeFive, adhesion layout
Characteristics of 1.
- There’s a piece of content
<main>when<main>The Gao Kang is long enough to keep up<main>The following element<footer>Will follow in<main>Element. - when
<main>When the element is short (such as less than the height of the screen), we expect this<footer>Elements can “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>
Copy the code* { margin: 0; padding: 0; } html, body { height: 100%; // 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;
}
Copy the code2. Implementation steps
(1) The footer must be a separate structure with no nested relationship to the wrap
(2) The height of the wrap area is changed to the viewport height by setting min-height
(3) The footer should use a margin of negative to determine its position
(4) 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.
Revised in 2019.1.2, if you feel the article has some help, welcome inMy GitHub blogLike and follow, thank you!