聖杯佈局和雙飛翼佈局-html教學-PHP中文網

聖杯佈局和雙飛翼佈局主要用來解決以下問題：

1.三列佈局，兩側定寬，中間自適應。 2.中間欄在瀏覽器中優先載入渲染。

解決思路：

先把中間的div寫到前面，然後左側，然後右側。這樣就解決了第二個問題，中間的div優先渲染。

但是這樣會存在一個問題，寫到前面的也會顯示在前面。

為了解決這個問題，我們讓這三列都浮動起來。然後設定中間列寬度為100%。

此時中間列在第一行，左右都在第二行。此時只需要將左列移到中間的左邊，右邊列會移到中間的右邊。我們給左右加一個固定寬度，例如150px。

接著在左列加上一個負邊距，margin-left：-100%；右列加上一個負邊距margin-left：-150px；

此時可以看到三列佈局已經形成。但是問題在於，中間div的內容被擋住了。在解決這個問題上，聖杯佈局和雙飛翼佈局開始出現不同的想法。

聖杯佈局先給三列div外面套上一個div，我們可以使用語意化來標記article。將article設定了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative。此時可以看到三列都向中間縮排了。然後再分別給左右兩列增加right和left的負值，就可以達到目的了。

程式碼如下：

<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>

登入後複製

<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>;
}

登入後複製

雙飛翼佈局則是在中間div內部創建子div用於放置內容，在該子div裡用margin-left和margin-right為左右兩欄div留出位置。

程式碼如下：

<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>

登入後複製

<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>;
}

登入後複製

接下來如果我們想讓三列等高，可以給三列分別增加屬性padding-bottom: 9999px;margin-bottom: -9999px;來將三列拉到無限長。再給三列外面的article標籤加上overflow: hidden;屬性就行了。

Ending。