聖杯布局和雙飛翼布局

聖杯布局與雙飛翼布局

聖杯和雙飛翼布局都是左右兩邊固定中間自適應，都是負margin的應用。

聖杯布局

html:

class="header">div>

class="content">

class="middle">div>

class="left">div>

class="right">div>

div>

class="footer">div>

css:

*

.header,.footer 
.content 
.middle,.left,.right
.middle 
.left 
.right 

先寫middle，後寫left、right，因為middle要先渲染

left、right需要設定position:relative以及相應的left、right

負margin：left的margin:left使它上移一行，同時使right向右移佔據原先left的位置，right的負margin使它向上移並靠右。

雙飛翼布局

html:

class="header">div>

class="content">

class="middle">

class="inner-middle">div>

div>

class="left">div>

class="right">div>

div>

class="footer">div>

css:

*

.header,.footer
.content
.inner-middle,.left,.right
.middle
.inner-middle
.left
.right

區別聖杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊等寬，中間自適應的三欄布局，中間欄要在放在文件流前面以優先渲染。

聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div併排，以形成三欄布局。

不同在於解決」中間欄div內容不被遮擋「問題的思路不一樣：

簡單說起來就是」雙飛翼布局比聖杯布局多建立了乙個div，但不用相對布局了。

參考：

css布局之聖杯布局和雙飛翼布局

css布局中聖杯布局與雙飛翼布局的實現思路差異在**？

聖杯布局 雙飛翼布局

前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding，left的margin left和left值，right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...