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

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

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

摘要：參考文章同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局實(shí)現(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 評(píng)論0 收藏0
CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

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

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

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

Forelax 2019-08-02 14:31 評(píng)論0 收藏0