css聖杯布局和雙飛翼布局

2022-03-07 12:36:17 字數 2103 閱讀 4689

一，聖杯布局跟雙飛翼布局的實現，目的都是左右兩欄固定寬度，中間部分自適應。

方法一，聖杯布局

實現效果：左邊固定寬度200px,右邊固定寬度300px,中間自適應。

實現方法：主體部分三個子元素都設定浮動，左邊子元素設定margin-left:-100%,右邊子元素設定margin-left:-200px;

html結構：

<


div 


class


="container"


>


<


div 


class


="main"


>main


div>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>
css清單：

.container.left,.main,.right.left.main.right
方法二：雙飛翼布局雙飛翼布局解決問題的方案前一半是相同的，也是三欄全部左浮動，左右兩欄加上負margin讓其跟中間欄div併排，以形成三欄布局。

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

html結構發生了變化：

<


div 


class


="container"


>


<


div 


class


="main"


>


<


div 


class


="content"


>main


div>


div>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>
css清單：

.left,.main,.right.left.main.main .content.right
方法三：flex布局

html結構：

<


div 


class


="container"


>


<


div 


class


="left"


>left


div>


<


div 


class


="center"


>center


div>


<


div 


class


="right"


>right


div>


div>
css清單：

.container.left.center.right
方法四：絕對定位實現

html結構：

<


div 


class


="container"


>


<


div 


class


="main"


>main


div>


<


div 


class


="left"


>left


div>


<


div 


class


="right"


>right


div>


div>
css清單：

.container.left,.main,.right.left.main.right

CSS聖杯布局（雙飛翼布局）

我在網上看了有關於css聖杯布局的文章，有很多直接丟 給效果，看得我雲裡霧裡。首先按我的理解來講述一下聖杯布局吧。首先他的作用就是 像 網那樣，中間先渲染，兩邊後渲染，其次中間的內容是自適應高度的。最好的例子就是 網了。樣式 1.三列布局 2.中間板塊先渲染，自適應高度寬度 3.兩邊定寬 那我們就開...

CSS布局 聖杯布局 雙飛翼布局

聖杯布局和雙飛翼布局解決的都是兩邊頂寬 中間自適應的三欄布局問題，要實現中間部分優先渲染。先上兩個demo。聖杯布局 雙飛翼布局 兩者的異同 首先如開題所述，兩種布局解決的問題是一樣的，只是實現方式有些微小的差別 兩者都採用了向左浮動的方式，還用實現布局的重點都是負邊距的使用 聖杯布局使用固定的左右...

CSS 聖杯 雙飛翼布局

html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left，center，right左浮動。清除container浮動，保證後面的div正常布局 left,center,r...