成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

兩招搞定三欄布局——圣杯布局、雙飛翼布局

Kaede / 2247人閱讀

摘要：如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局這是一道經(jīng)典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過設(shè)置的左右來實(shí)現(xiàn)的。

如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局？

這是一道經(jīng)典的面試題，常用的方法是：圣杯布局、雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。

圣杯布局

首先，我們先定義HTML結(jié)構(gòu)：


    
中間的

    
左邊的

    
右邊的

再來開始我們的布局，首先給這三個(gè)div都給一個(gè)float: left，讓它們均左浮動(dòng)。

.middle, .left, .right{
    float: left;
}

接下來是最重要的兩個(gè)步驟，設(shè)置左盒子的margin-left: -100%，把左盒子拉上來，調(diào)整左盒子的浮動(dòng)位置到中間盒子的左側(cè)。

再設(shè)置右盒子的margin-left: -右盒子寬度px，把右盒子拉上來，調(diào)整右盒子的浮動(dòng)位置到中間盒子的右側(cè)。

.left{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -100%;
    }
    
.right{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -300px;  //300px為右盒子的寬度
}

【*】此時(shí)的布局基本出來了，但是中間盒子的左右兩側(cè)會(huì)被左右兩個(gè)盒子覆蓋掉，此時(shí)我們要通過相對(duì)定位來避免覆蓋。給左右盒子position: relative，再分別設(shè)置它們的left和right,并且控制父元素的padding來為左右兩邊留白。

.left{
    position: relative;
    left: -300px;
}

.right{
    position: relative;
    right: -300px;
}

.container{
    border: 1px solid black;
    height: 300px;
    padding: 0 400px;
}

ok！大功告成，圣杯布局已經(jīng)完成啦~

雙飛翼布局

雙飛翼的布局基本和圣杯布局類似，它的HTML結(jié)構(gòu)為：


    

        
中間的

    

    
左邊的

    
右邊的

前面的布局和圣杯完全一致，只是從【*】開始的這一步略微有些差異。

在雙飛翼中避免左右盒子被覆蓋，是通過設(shè)置inner_middle的左右margin來實(shí)現(xiàn)的。

.inner_middle{
    margin: 0 300px;
}

另外，整個(gè)布局的左右padding留白也有些差異，直接設(shè)置父盒子的padding為左右留白的寬度就可以了。

.container{
    border: 1px solid black;
    height: 300px;
    padding: 0 100px;

}

這里還有第二種實(shí)現(xiàn)方式，HTML結(jié)構(gòu)沿用圣杯布局的結(jié)構(gòu)，通過設(shè)置左右padding來避免中間盒子內(nèi)容的覆蓋。同時(shí)為了避免布局混亂，還有設(shè)置box-sizing: border-box，表示width包括border和padding，這樣可以保證即使設(shè)置右左右padding，它的總寬度也是不變的。

.middle{
    background: #ccc;
    width: 100%;
    height: 300px;
    padding: 0 300px;
    box-sizing: border-box;
}

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

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

相關(guān)文章

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁面的形象表達(dá)。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問的問題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...

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

  • 圣杯布局和雙飛翼布局

    摘要：比起雙飛翼布局，它的起源不是源于對(duì)頁面的形象表達(dá)。一起來看看這兩種布局的區(qū)別在哪一雙飛翼布局可以看到，我們?cè)诶锩嬗旨恿艘粋€(gè)內(nèi)容層。 稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時(shí)必問的問題，因?yàn)樗饶荏w現(xiàn)你懂HTML結(jié)構(gòu)又能體現(xiàn)出你對(duì)ＤIV+CSS布局的掌握，畢竟我們學(xué)習(xí)CSS主要就是為了更好地布局帶來最好的用戶體驗(yàn)嘛~ 事實(shí)上，圣杯布局其實(shí)和雙飛翼布局是一回事。它們實(shí)現(xiàn)的都...

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

  • 圣杯布局和雙飛翼布局

    摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。 解決的問題 圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。 圣杯布局 圣杯布局dom結(jié)構(gòu)： 圣杯布局 ...

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

  • CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

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

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

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

0條評(píng)論

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