<fieldset id="uqwk0"></fieldset>

<ul id="uqwk0"></ul>

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

Kaede 發布于2019-08-29 16:19 / 2234人閱讀

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

如何實現如下的這種中間自適應寬度，左右兩欄固定寬度布局？

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

圣杯布局

首先，我們先定義HTML結構：


    中間的
    左邊的
    右邊的

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

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

接下來是最重要的兩個步驟，設置左盒子的margin-left: -100%，把左盒子拉上來，調整左盒子的浮動位置到中間盒子的左側。

再設置右盒子的margin-left: -右盒子寬度px，把右盒子拉上來，調整右盒子的浮動位置到中間盒子的右側。

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

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

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

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

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

ok！大功告成，圣杯布局已經完成啦~

雙飛翼布局

雙飛翼的布局基本和圣杯布局類似，它的HTML結構為：


    
        中間的
    
    左邊的
    右邊的

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

在雙飛翼中避免左右盒子被覆蓋，是通過設置inner_middle的左右margin來實現的。

.inner_middle{
    margin: 0 300px;
}

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

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

}

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

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

GPU云服務器云服務器圣杯布局三欄布局雙飛翼布局 html5 三欄布局

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

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

圣杯布局和雙飛翼布局

摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

Clect 2019-08-02 16:17 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

468122151 2019-08-30 10:49 評論0 收藏0
圣杯布局和雙飛翼布局

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

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

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

neuSnail 2019-08-30 15:56 評論0 收藏0