關于圣杯布局和雙飛翼布局

qianfeng 發布于2019-08-01 16:18 / 581人閱讀

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

圣杯布局
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;
}

效果如圖：

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50433.html

關于圣杯布局和雙飛翼布局

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

dantezhao 2019-08-30 15:52 評論0 收藏0
聊聊為什么淘寶要提出「雙飛翼」布局

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

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

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

ZweiZhao 2019-08-29 16:13 評論0 收藏0
CSS三欄布局的經典實現方法

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

neuSnail 2019-08-30 15:56 評論0 收藏0
CSS三欄布局的經典實現方法

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

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