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

資訊專欄INFORMATION COLUMN

css雙飛 翼布局

CarterLi / 615人閱讀

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

引言

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

雙飛翼布局經典實現(xiàn) 
// HTML部分


    

        
主內容欄自適應寬度

    


    

        
側邊欄1固定寬度

    


    

        
側邊欄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橫行時期，人們不得已采用的方法，不好理解，寫起來也很麻煩。今天我運用兩種現(xiàn)在瀏覽器支持的css屬性，簡化一下代碼。

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


    

        

            主內容欄自適應寬度
        

    


    

        
側邊欄1固定寬度

    


    

        
側邊欄2固定寬度

第一種:

// 利用flex布局的order屬性，輕松實現(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;
 }

//利用絕對定位，加上box-sizing，也能實現(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ā)展的滾滾大潮所謂的雙飛翼、圣杯布局中間會被歷史淘汰，迎來新的時期。

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

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

相關文章

  • css雙飛 翼布局

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

    cyqian 評論0 收藏0

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

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

    zqhxuyuan 評論0 收藏0

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

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

    Aldous 評論0 收藏0

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

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

    LuDongWei 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<