国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css雙飛 翼布局

cyqian / 1202人閱讀

摘要：引言曾經(jīng)在江湖上盛傳的雙飛翼布局，無(wú)人不知，無(wú)人不曉。雙飛翼布局之我的實(shí)現(xiàn)主內(nèi)容欄自適應(yīng)寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度第一種利用布局的屬性，輕松實(shí)現(xiàn)。

引言

曾經(jīng)在江湖上盛傳的雙飛翼布局，無(wú)人不知，無(wú)人不曉。大概的意思就是左右兩邊盒子固定寬度，剩下中間部分自由縮放，考慮到一般網(wǎng)站的主體部分在中間，用戶首先需要看到的是中間部分。所以將中間的div放在最上方，如下圖所示。

雙飛翼布局經(jīng)典實(shí)現(xiàn) 
// HTML部分


    

        
主內(nèi)容欄自適應(yīng)寬度

    


    

        
側(cè)邊欄1固定寬度

    


    

        
側(cè)邊欄2固定寬度

    




//css部分
.container {
    position: relative;
    width: 100%;
}
.container > div {
    position: absolute;
}
.main {
    width: 100%;
    padding: 0 200px;
    box-sizing: border-box;
}
.aside-1 {
    width: 200px;
    top: 0;
    left: 0;
}
.aside-2 {
    width: 200px;
    top: 0;
    right: 0;
}

雙飛翼布局是IE6橫行時(shí)期，人們不得已采用的方法，不好理解，寫(xiě)起來(lái)也很麻煩。今天我運(yùn)用兩種現(xiàn)在瀏覽器支持的css屬性，簡(jiǎn)化一下代碼。

雙飛翼布局之我的實(shí)現(xiàn) 
 // html


    

        

            主內(nèi)容欄自適應(yīng)寬度
        

    


    

        
側(cè)邊欄1固定寬度

    


    

        
側(cè)邊欄2固定寬度

第一種:

// 利用flex布局的order屬性，輕松實(shí)現(xiàn)。
.container {
    display: flex;
    width: 100%;
}

.main {
    flex: 1;
    order: 2;
}

.aside-1 {
    flex: 0 0 200px;
    order: 1;
}
 
 .aside-2 {
    flex: 0 0 200px;
    order: 3;
 }

//利用絕對(duì)定位，加上box-sizing，也能實(shí)現(xiàn)的效果。
.container {
    width: 100%;
}

.container > div {
    float: left;
}

.main {
    width: 100%;
}
.middle {
    margin: 0 200px;
}
.aside-1 {
    width: 200px;
    margin-left: -100%;
}
 
 .aside-2 {
    width: 200px;
    margin-left: -200px;
 }

如上可知，隨著前端發(fā)展的滾滾大潮所謂的雙飛翼、圣杯布局中間會(huì)被歷史淘汰，迎來(lái)新的時(shí)期。

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

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

相關(guān)文章

  • css雙飛 翼布局

    摘要：引言曾經(jīng)在江湖上盛傳的雙飛翼布局，無(wú)人不知，無(wú)人不曉。雙飛翼布局之我的實(shí)現(xiàn)主內(nèi)容欄自適應(yīng)寬度側(cè)邊欄固定寬度側(cè)邊欄固定寬度第一種利用布局的屬性，輕松實(shí)現(xiàn)。 引言 曾經(jīng)在江湖上盛傳的雙飛翼布局，無(wú)人不知，無(wú)人不曉。大概的意思就是左右兩邊盒子固定寬度，剩下中間部分自由縮放，考慮到一般網(wǎng)站的主體部分在中間，用戶首先需要看到的是中間部分。所以將中間的div放在最上方，如下圖所示。 showImg...

    CarterLi 評(píng)論0 收藏0

  • CSS布局--圣杯布局和雙飛翼布局以及使用Flex實(shí)現(xiàn)圣杯布局

    摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實(shí)解決的問(wèn)題是相同的，都是解決左右兩欄固定寬度，中間部分自適應(yīng)，其中某部分內(nèi)容比其他內(nèi)容高的時(shí)候，保證三者元素等高。雙飛翼用在外層多加了一個(gè)然后改用。 前言 我曾一度覺(jué)得總寫(xiě)css的前端很low，有了這種思想以后我便遠(yuǎn)離網(wǎng)頁(yè)布局，H5的工作更不想接，沉迷于頁(yè)面邏輯和封裝組件。直到最近我面試，面試官說(shuō)我css3理解的不熟，我起初很不屑，但后來(lái)靜...

    zqhxuyuan 評(píng)論0 收藏0

  • CSS 圣杯布局 / 雙飛翼布局的實(shí)現(xiàn)

    摘要：先讓它們浮動(dòng)，并給和一個(gè)固定寬度，寬度，清除浮動(dòng)流，結(jié)果變成上面這樣。工作的越久，有些基礎(chǔ)知識(shí)我們可能就逐漸淡忘了，今天我們來(lái)回顧一下css的圣杯布局和雙飛翼布局， 這兩個(gè)名詞你可能不熟， 那三欄布局你肯定就非常熟悉了， 就是兩邊定寬， 中間自適應(yīng) 的 布局? 1 ， 圣杯布局?? 三欄布局 center left right footer 首先HTML結(jié)構(gòu)...

    Aldous 評(píng)論0 收藏0

  • CSS 圣杯布局 / 雙飛翼布局的實(shí)現(xiàn)

    摘要：先讓它們浮動(dòng)，并給和一個(gè)固定寬度，寬度，清除浮動(dòng)流，結(jié)果變成上面這樣。工作的越久，有些基礎(chǔ)知識(shí)我們可能就逐漸淡忘了，今天我們來(lái)回顧一下css的圣杯布局和雙飛翼布局， 這兩個(gè)名詞你可能不熟， 那三欄布局你肯定就非常熟悉了， 就是兩邊定寬， 中間自適應(yīng) 的 布局? 1 ， 圣杯布局? !--三欄布局-- header 三欄布局 /header div div cent...

    LuDongWei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<