關(guān)于圣杯布局和雙飛翼布局

dantezhao 發(fā)布于2019-08-30 15:52 / 1645人閱讀

摘要：圣杯布局左寬度為右邊寬度為效果如圖雙飛翼布局效果如圖兩種布局的區(qū)別這兩種布局實現(xiàn)的都是兩邊固定寬度，中間自適應(yīng)，中間欄放在最前面優(yōu)先渲染。不同的是，雙飛翼布局多創(chuàng)建一個包裹的，去掉了相對定位，相對少寫一些。

圣杯布局
html：


    center
    left
    right

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

效果如圖：

雙飛翼布局
html：


    
        center
    
    left
    right

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

效果如圖：

兩種布局的區(qū)別
這兩種布局實現(xiàn)的都是兩邊固定寬度，中間自適應(yīng)，中間欄放在最前面優(yōu)先渲染。
不同的是，雙飛翼布局多創(chuàng)建一個包裹的div，去掉了相對定位，css相對少寫一些。
個人認為圣杯布局結(jié)構(gòu)更簡潔，平常工作中就看大家自己的選擇了。

云服務(wù)器 GPU云服務(wù)器圣杯布局雙飛翼布局樣式和布局 div布局布局html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116492.html

相關(guān)文章

關(guān)于圣杯布局和雙飛翼布局

摘要：圣杯布局左寬度為右邊寬度為效果如圖雙飛翼布局效果如圖兩種布局的區(qū)別這兩種布局實現(xiàn)的都是兩邊固定寬度，中間自適應(yīng)，中間欄放在最前面優(yōu)先渲染。不同的是，雙飛翼布局多創(chuàng)建一個包裹的，去掉了相對定位，相對少寫一些。圣杯布局html： center left right css: #container { padding: 0 100px ...

qianfeng 2019-08-01 16:18 評論0 收藏0
聊聊為什么淘寶要提出「雙飛翼」布局

摘要：于是，淘寶軟對針對圣杯的缺點做了優(yōu)化，并提出雙飛翼布局。綜合來看，不管的大小高低如何，雙飛翼布局都能正常顯示，嗯確實很優(yōu)秀。錘子和釘子綜上所見，雙飛翼布局更勝一籌。 showImg(https://segmentfault.com/img/bVYtjF?w=922&h=561); 前言突然有一天，腦之里不知怎地蹦出一個詞，「雙飛翼」，這是很久以前的淘寶提出的一種三欄布局優(yōu)化方案，然而...

junbaor 2019-08-29 13:47 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：參考文章同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局實現(xiàn)的效果主要在中，和固定寬度，首先渲染，且自適應(yīng)寬度。 ps: 參考文章 DotHide同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 評論0 收藏0
CSS三欄布局的經(jīng)典實現(xiàn)方法

摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節(jié)和異同。三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

neuSnail 2019-08-30 15:56 評論0 收藏0
CSS三欄布局的經(jīng)典實現(xiàn)方法

摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過來實現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節(jié)和異同。三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網(wǎng)頁內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

Forelax 2019-08-02 14:31 評論0 收藏0