Five ways to realize the three-column layout

table of Contents

The three-column layout generally refers to a page with a total of three columns, the left and right columns are fixed in width, and the middle is adaptive.

Roughly written five ways to achieve, the first three can not achieve the effect of priority display of important content , while the latter two can:

The left width of the leftmost column is 300px, and the right width of the rightmost column is 200px

1. Use float

Principle: Floating elements leave the document flow

HTML structure

<div class="wrapper">

    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>

</div>

CSS style

.left {
    float: left;
    width: 300px;
    height: 400px;
    background-color: limegreen;

}

.right {
    float: right;
    width: 200px;
    height: 400px;
    background-color: yellowgreen;
}

.center {
    height: 400px;
    margin: 0 200px 0 300px;
    background-color: tomato;
}

2. Use absolute positioning

The idea is basically the same as that of float, that is, the set values are different. In float, float-left and float-right are set, and left and right are set.

Principle: Absolutely positioned elements are out of the document flow

HTML structure is the same as above

CSS style

.wrapper {
    position: relative;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 500px;
    background-color: lightgreen;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 500px;
    background-color: lightskyblue;
}

.center {
    height: 500px;
    margin: 0 200px 0 300px;
    background-color: tomato;
}

3. Use flex layout

Principle: Take advantage of the characteristics of the order attribute of the container item

HTML structure

<div class="wrapper">

    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

</div>

CSS style

.wrapper {
    display: flex;
    height: 500px;
}

.center {
    order: 1; /* 默认值为0，order越小位置越靠前，越靠上，此时就不用考虑覆盖的问题了*/
    flex-grow: 1;
    /* flex-grow : 默认值为0，为0时有剩余空间也不放大，子元素该属性均为1时，剩余空间被所有为1的子元素均分，有一个子元素该属性为2时，该元素将分得或者努力分得其他为1的子元素所分得空间2倍大小的空间 */
    /* flex-shrink : 默认值为1，当子元素中存在某个元素该属性为0时，若空间不足，则为1的缩小，为0的不变，因此可以猜测，为2的弱小的应该是更多，应该是缩小了为1缩小的空间的两倍 */

    background-color: tomato;
}

.left {
    width: 300px;
    height: 500px;
    background-color: lightgreen;
}

.right {
    order: 2;
    width: 200px;
    height: 500px;
    background-color: lightskyblue;
}

4. The layout of the Holy Grail:

The Holy Grail layout is actually a three-column layout, but the middle content is displayed first .

Realization ideas:

1) In the three columns of the wrapper center, left and rigth, set the left float (yes, they are all left float, let's understand it first, I will explain below) and relative positioning

The width of left and right are 300px and 200px respectively, and the width of center is 100%

(The total width of the center is 100%, which is equal to the width of the container of the parent element. The width of the container will be set by setting the padding value minus 300px for left and 200px for right)

2) Because of the relationship between float and width: 100%, center will fill the entire wrapper, and left and right will be squeezed below it

3) Set margin-left to left: -100%, let it return to the left side of the previous line

(When a negative value is set for margin-left, it can be understood as the width of the left border of the current element from the rightmost side of the parent element’s container, and 100% is relative to the parent element’s container (standard box model width=container Width), then this -100% effect is to make the left border of left adjacent to the leftmost side of the parent element container)

4) At this time, the left part of center will be covered, so you need to set padding: 0 200px 0 300px for the parent element wrapper, and leave a space for left

(The width of the left is 300. Naturally, you need to give the left inner margin 300px to shrink the wrapper's container, so as to reduce the center's width [100% of the center's container width means the same width as the parent element's container, not Contains padding, so when we set padding, the container width of the parent element will be reduced, and the natural center width will also become smaller], the same for the right inner margin)

5) At this time, you will find that left is not yet on the left

(The margin-left is relative to the container of the parent element. The parent element has a left inner margin. Naturally, the left side of the container has an extra width of 300px. At this time, left also follows the container and has a width of 300px from the left border of the parent element. Since left is 300px from the left border, just give it -300px)

At this time, you need to pass the previously set relative positioning, and then give left: -300px to make it back to the far left

6) For the same reason, set margin-left: -200px for right, and pull right back to the first line.

(The reason is the same. First, you need to make the leftmost distance of the "wrapper container rightmost" the width of right itself to avoid being squeezed to the next line. Before that, we have already considered that the certer will be left. , Right coverage, so set padding for the wrapper [why set padding for the wrapper has already been explained in detail], the right inner margin is 200px, so after setting the margin-left: -200px, the left is actually the rightmost The side is the rightmost of the container next to the wrapper, and there is 200px padding on the right. We need to make the right side of the right side next to the rightmost of the wrapper, and we need to move it 200px to the right)

7) At this time, set right to it: -200px;

HTML structure

<div class="wrapper">

    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>

</div>

CSS style

.wrapper {
    height: 500px;
    padding: 0 200px 0 300px; /* wrapper的container两侧空出来left和right的宽度 */
}

.center, .left, .right {
    position: relative;
    float: left;
}

.center {
    width: 100%; /* 宽度＝wrapper的container的宽度，两侧已空出left和right */
    height: 500px;
    background-color: tomato;
}

.left {
    width: 300px;
    height: 500px;
    margin-left: -100%; /* 左侧紧邻container左侧 */
    left: -300px; /* 移至左侧紧邻wrapper最左侧，右侧紧邻container左侧 */
    background-color: lightgreen;
}

.right {
    width: 200px;
    height: 500px;
    margin-left: -200px; /* 右侧紧邻container右侧 */
    right: -200px; /* 移至右侧紧邻wrapper最右侧 */
    background-color: lightskyblue;
}

5. Layout of double flying wings:

The Shuangfei Wing layout is actually similar to the Holy Grail layout, both of which are to achieve a three-column layout, and the middle content is displayed first

The difference is that the Holy Grail layout uses wrapper padding to retain the left and right positions , while the double flying wing layout uses the margin for the center , because it is nested again outside the center with a layer of div (Center-wrapper), as long as the width of the center margin is exactly equal to left and right, it looks like center and left and right are three independent panels visually. At this time, the leftmost side of left is still adjacent to the leftmost side of the wrapper container, and the rightmost side of left is adjacent to the leftmost side of the center container; the rightmost side is still the rightmost side of the wrapper container. The leftmost side of right is adjacent to the rightmost side of the certer’s container, because we did not set padding or margin for the wrapper and center-wrapper, but set the margin for the inner center (in fact, the center-wrapper is basically The above and wrapper overlap, basically did not do any processing on the style of center-wrapper, but we need the structure of center-wrapper to build the structure of center)

HTML structure

<div class="wrapper">
    
    <div class="center-wrapper">
        <div class="center">1111111</div>
    </div>

    <div class="left"></div>
    <div class="right"></div>

</div>

Set the left float in the three columns of the wrapper, center-wrapper, left, and right

The width of left and right are set to 300px and 200px respectively, and the width of center-wrapper is set to 100%

Set margin-left to left: 100% to make it return to the leftmost side of the previous line

At this time, part of the content in the center will be covered by it, so set the margin: 0 200px 0 300px for the center-wrapper to make it not covered

Use margin-left: -200px for right to return to the rightmost of the previous line, and you're done

CSS style

.wrapper {
    height: 500px;
}

.center-wrapper,
.left,
.right {
    float: left;
    height: 500px;
}

.center-wrapper {
    width: 100%;
    background-color: tomato;
}

.left {
    width: 300px;
    margin-left: -100%;
    background-color: lightgreen;
}

.right {
    width: 200px;
    margin-left: -200px;
    background-color: lightskyblue;
}

.center {
    margin-left: 300px;
    margin-right: 200px;
    height: 500px;
}