聖盃佈局和雙飛翼佈局

時間 2019-11-26

標籤佈局雙飛简体版

原文原文鏈接

聖盃佈局和雙飛翼佈局主要用來解決如下問題：css

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

解決思路：瀏覽器

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

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

爲了解決這個問題，咱們讓這三列都浮動起來。而後設置中間列寬度爲100%。spa

此時中間列在第一行，左右都在第二行。此時只須要將左列移動到中間的左邊，右列移動到中間的右邊。咱們給左右加一個固定寬度，好比150px。code

而後給左列加一個負邊距，margin-left：-100%；右列加一個負邊距margin-left：-150px；htm

此時能夠看到三列布局已經造成。可是問題在於，中間div的內容被擋住了。在解決這個問題上，聖盃佈局和雙飛翼佈局開始出現不一樣的思路。blog

聖盃佈局首先給三列div外面套上一個div，咱們能夠使用語義化標籤article。將article設置了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative。此時能夠看到三列都向中間縮進了。而後再分別給左右兩列增長right和left的負值，就能夠達到目的了。it

代碼以下：

聖盃佈局html代碼：

<body>
    <article>
        <div class="main">
            我是中間
        </div>
        <div class="left">
            我是左
        </div>
        <div class="right">
            我是右
        </div>
    </article>
</body>

聖盃佈局css代碼：

*{
    margin: 0;
    padding: 0;
}
article{
    padding-left:150px;
    padding-right:150px;
}
.main{
    background-color: lightblue;
    width:100%;   
}
.left{
    background-color: yellowgreen;
    width:150px;
    margin-left:-100%;
    position: relative;
    /*left:-150px;*/
}
.right{
    background-color: pink;
    width:150px;
    margin-left:-150px;
    position: relative;
    /*right:-150px;*/
}
.main,.left,.right{
    float: left;
}

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

代碼以下：

雙飛翼佈局html代碼：

<body>
    <div class="main">
        <div class="inside">
        我是中間
        </div>           
    </div>
    <div class="left">
        我是左
    </div>
    <div class="right">
        我是右
    </div>
</body>

雙飛翼佈局css代碼：

*{
    margin: 0;
    padding: 0;
}
.main{
    background-color: lightblue;
    width:100%;   
}
.inside{
    margin-left:150px;
    margin-right:150px;
}
.left{
    background-color: yellowgreen;
    width:150px;
    margin-left:-100%;
}
.right{
    background-color: pink;
    width:150px;
    margin-left:-150px;
}
.main,.left,.right{
    float: left;
}

接下來若是咱們想讓三列等高，能夠給三列分別增長屬性padding-bottom: 9999px;margin-bottom: -9999px;來將三列拉到無限長。再給三列外面的article標籤加上overflow: hidden;屬性就好了。

Ending。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。