聖杯布局和雙飛翼布局的作用和區別

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

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

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

聖杯布局，為了中間div內容不被遮擋，將中間div設定了左右padding-left和padding-right後，將左右兩個div用相對布局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div。

雙飛翼布局，為了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裡用margin-left和margin-right為左右兩欄div留出位置。

多了1個div，少用大致4個css屬性（聖杯布局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對布局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼布局子div裡用margin-left和margin-right共2個屬性，6-2=4），個人感覺比聖杯布局思路更直接和簡潔一點。

簡單說起來就是」雙飛翼布局比聖杯布局多建立了乙個div，但不用相對布局了「，而不是你題目中說的」去掉relative"就是雙飛翼布局「。

最終介面是一樣的：

對比圖：

下面直接上**：

聖杯布局：

>聖杯布局

title

style

*.bd

.middle

.left

.right

style

head

body

div

class

="bd"

div

class

="middle"

>middle

div>

div

class

="left"

>left

div>

div

class

="right"

>right

div>

body

html

雙飛翼布局：

>雙飛翼布局

title

style

*.middle

.left

.right

/*給內部div新增margin，把內容放到中間欄，其實整個背景還是100%

*/.middle .inside

style

head

body

div

class

="middle"

div

class

="inside"

>middle

div>

div

class

="left"

>left

div>

div

class

="right"

>right

div>

body

html

<
body
>
<
style 
type
="text/css"
>
body
.boxa
.boxb
.boxc
.box
/*abc
*//*
.boxa
.boxb
*//*
cba*/
.container
.boxb
.boxc
.boxa
/*bac
*//*
.boxc
.container
*/style
>
<
p>現有並列的三列布局結構，從左至右依次為 a, b, c, 寬度分別為180px, 600px, 180px。要求在不改變 html 結構的情況下用css實現：abc，cba，bac 三種布局及在cba排列下使b寬度自適應（三列總寬度100%），不能使用針對瀏覽器的css hack.
p>
<
div 
class
="container"
>
<
div 
class
="box boxb"
>b
div>
<
div 
class
="box boxc"
>c
div>
<
div 
class
="box boxa"
>a
div>
div>
body
>

原始碼位址：

聖杯布局和雙飛翼布局的作用和區別

聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局

相關推薦