Transferred from: Micro reading (www.weidianyuedu.com) Micro reading - complete collection of model articles - free learning website

In web page layout, three column layout is a common layout, especially on the PC side. As shown in the figure below.

Three column layout

From top to bottom, it is composed of header, content and footer. The content is composed of left, middle and right columns. The width of the left and right columns is fixed, and the middle column is adaptive. Suppose the left and right width is 100px and the height of header and footer is 60px.

The following five methods are introduced: floating, absolute positioning and flex box   and   grid-box   And table layout.

The HTML skeleton is as follows:

<main>    <header>header</header>    <article>        <section class="left">left</section>        <section class="center">center</section>        <section class="right">right</section>    </article>    <footer>footer</footer></main>

Floating layout

To use floating, you need to adjust the HTML skeleton   section   The order of is adjusted to:

<!-- center Move to first --><section class="center">center</section><section class="left">left</section><section class="right">right</section>

The code is as follows:

header{    height: 60px;}footer{    height: 60px;    /* article The element in uses floating, which is cleared here  */    clear: both;}article{    /* When the values are three, they represent   Up, left and right, down  */    /* Left and right   padding   The value should be the same as   left,right   Consistent area width  */    padding: 0 100px 0;}article section{    float: left;}.center{    /* Make the width of the middle container equal to the width of the parent container  */    /* Parent container and   padding, so there will be on both sides of the parent container   100px   Blank area of  */    width: 100%;}.left{    width: 100px;    /* margin When the value of is a percentage, it is relative to the width of the parent container  */    /* -100% Moves the width of the parent container to the left  */    margin-left: -100%;    /* Use relative positioning  */    position: relative;    right: 100px;}.right{    width: 100px;    margin-right: -100px;}

This implementation is called the "Holy Grail layout". In addition to the above methods, use floating+   calc   The middle part can also be adaptive. The HTML skeleton does not need to be adjusted. The code is as follows:

header{    height: 60px;}footer{    height: 60px;    clear: both;}article section{    float: left;}.left {    width: 100px;}.right {    width: 100px;}.center{    /* Width is a calculated value that subtracts the width of the left and right containers from the width of the parent container  */    width: calc(100% - 200px);}

There is also a common three column layout using floating, which is called "double flying wing layout". Its HTML structure is as follows:

<main>    <header>header</header>    <article class="container column">        <section class="center">center</section>    </article>    <article class="left column">left</article>    <article class="right column">right</article>    <footer>footer</footer></main>

CSS code is as follows:

.container{    width: 100%;}.column{    float: left;}.center{    margin: 0 100px 0;}.left{    width: 100px;    margin-left: -100%;}.right{    width: 100px;    margin-left: -100px;}footer{    clear: both;}

The dual wing layout is similar to the Holy Grail layout, except that the dual wing layout does not use relative positioning.

Absolute positioning

The code is as follows:

header{    height: 60px;}footer{    height: 60px;}article{    position: relative;}article section{    position: absolute;    height: 200px;}.left {    width: 100px;}.right {    right: 0;    width: 100px;}.center{    /* Set values on the left and right to make the intermediate container adaptive  */    left: 100px;    right: 100px;}

One thing that is definitely not well positioned is that the element is separated from the document flow, resulting in   footer   The element will "run up" and overlap with the positioning element. To make   footer   To get to the bottom, you need to do additional style processing, such as setting margin top and   footer   Absolute positioning is also set. If the height of the three containers is inconsistent, or the content in the container overflows, the layout aesthetics will be affected. It is not recommended to implement the Grail layout in this way.

Elastic box

It is easy to create the Grail layout using the elastic box. The code is as follows:

article{    display: flex;}.left, .right{    /* The width here can also be used   flex   Medium   flex-basis   attribute  */    /* flex-basis express   flex   The initial size of the element in the principal axis direction  */    /* flex-basis: 100px */    width: 100px;}.center{    flex-grow: 1;}

flex-grow   It specifies how much of the remaining space in the flex container should be allocated to the project. Because the width of the left and right containers has been determined, if 1 is specified, it means that the remaining space is allocated to  . center   Container. If it is  . five   It means that half of the space is allocated to the middle container.

Grid layout

Grid layout is a new layout method. First, transform the HTML skeleton. The code is as follows:

<main>    <header>header</header>    <section class="left">left</section>    <section class="center">center</section>    <section class="right">right</section>    <footer>footer</footer></main>

Then CSS code:

main{    display: grid;    grid-template-columns: 100px 1fr 100px;}header, footer{    height: 60px;    grid-column: 1/-1;}

Grid layout is difficult to understand and has many attributes, but it can easily layout complex pages. Explain the css code above. Set the page layout of three columns in the grid template columns property. The number of rows is adaptive. The left and right ends of the three columns are 100px, and the middle is adaptive, 1fr   The remaining space is allocated here.

Then set   header   and   footer, reset the number of columns they occupy, 1 / - 1   Indicates that a row is full (you own a column).

To use the grid layout without changing the HTML skeleton, you only need to set   article   The container can be grid layout. The code is as follows:

article{    display: grid;    grid-template-columns: 100px 1fr 100px;}

Two lines of code can achieve the Holy Grail layout, which shows the power of grid layout.

Table layout

The middle container can also be adaptive by using table layout. The code is as follows:

article{    display: table;    width: 100%;}article section{    /* Child elements are cells  */    display: table-cell;}.left{    width: 100px;}.right{    width: 100px;}

The above methods can be adaptive to the intermediate container, but there is also a problem. If the browser window is very small, the width of the intermediate container will be very short.

The middle part becomes very narrow

This problem can be solved in   body   Set a minimum width on the element. When the window width is smaller than this width, it is no longer adaptive.