Holy Grail layout and double flying wing layout-HTML Tutorial-php.cn

Holy Grail layout and double flying wing layout are mainly used to solve the following problems:

1. Three-column layout, fixed width on both sides, adaptive in the middle. 2. The middle column is loaded and rendered first in the browser.

Solution:

First write the middle div to the front, then to the left, then to the right. This solves the second problem, and the middle div is rendered first.

But there is a problem with this, what is written in the front will also be displayed in the front.

To solve this problem, we make all three columns float. Then set the middle column width to 100%.

At this time, the middle column is on the first row, and the left and right columns are on the second row. At this time, you only need to move the left column to the left of the center and the right column to the right of the center. We add a fixed width to the left and right, such as 150px.

Then add a negative margin to the left column, margin-left: -100%; add a negative margin to the right column margin-left: -150px;

At this point you can see that the three-column layout has been formed. But the problem is that the content of the middle div is blocked. In solving this problem, the Holy Grail layout and the double-wing layout began to have different ideas.

The holy grail layout first puts a div outside the three-column div. We can use the semantic tag article. After setting the left and right padding-left and padding-right of the article, use relative layout position: relative for the left and right divs. At this point you can see that all three columns are indented toward the middle. Then add negative values of right and left to the left and right columns respectively to achieve the goal.

The code is as follows:

<span style="color: #0000ff;"><span style="color: #0000ff;">圣杯布局</span>html代码：<br><br><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是中间
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是左
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是右
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">圣杯布局css代码：

*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
article</span>{<span style="color: #ff0000;">
    padding-left</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    padding-right</span>:<span style="color: #0000ff;">150px</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100%</span>;   
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> yellowgreen</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-100%</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">left:-150px;</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-150px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">right:-150px;</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.main,.left,.right</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}

Copy after login

The double-wing layout creates a sub-div inside the middle div to place content, and uses margin-left and margin-right in the sub-div to leave space for the left and right column divs.

The code is as follows:

<span style="color: #000000;">双飞翼布局html代码：

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inside"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是中间
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>           
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是左
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是右
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">双飞翼布局css代码：

*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100%</span>;   
}<span style="color: #800000;">
.inside</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;">150px</span>;
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> yellowgreen</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-100%</span>;
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-150px</span>;
}<span style="color: #800000;">
.main,.left,.right</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}

Copy after login

Next, if we want the three columns to be of equal height, we can add the attributes padding-bottom: 9999px; margin-bottom: -9999px; to the three columns respectively to make the three columns infinitely long. Just add the overflow: hidden; attribute to the article tag outside the three columns.

Ending.