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

About the Holy Grail layout and the double flying wing layout

高洛峰

Release： 2017-02-18 14:22:01

Original

1557 people have browsed it

Holy Grail Layout
html：

<p id="container">
    <p id="center">center</p>
    <p id="left">left</p>
    <p id="right">right</p>
</p>

Copy after login

css:

#container {
            padding: 0 100px 0 200px;/*左宽度为200px 右边宽度为100px*/
}
.col {
    float: left;
    position: relative;
    height: 300px;
}
#center {
    width: 100%;
    background: #eee;
}
#left {
    width: 200px;
    background: blue;
    margin-left: -100%;
    right: 200px;
}
#right {
    width: 100px;
    background: red;
    margin-right: -100px;
}

Copy after login

The effect is as shown:

关于圣杯布局和双飞翼布局

Double Flying Wing Layout
html：

<p id="container">
    <p id="center" class="col">
        <p class="wrap">center</p>
    </p>
    <p id="left" class="col">left</p>
    <p id="right" class="col">right</p>
</p>

Copy after login

css:

.col {
            float: left;
            height: 300px;
}
#center {
    width: 100%;
    background: #eee;
}
#left {
    width: 200px;
    background: blue;
    margin-left: -100%;
}
#right {
    width: 100px;
    background: red;
    margin-left: -100px;
}
#center .wrap {
    margin: 0 100px 0 200px;
}

Copy after login

The effect is as shown:

关于圣杯布局和双飞翼布局

The difference between the two layouts
These two layouts implement fixed width on both sides, adaptive middle column, and the middle column is placed at the front for priority rendering.
The difference is that the double flying wing layout creates an extra wrapped p, removes relative positioning, and writes less css.
Personally, I think the Holy Grail layout structure is more concise. It depends on everyone’s own choice in daily work.

For more related articles about Holy Grail layout and Double Flying Wing layout, please pay attention to the PHP Chinese website!