CSS 圣杯布局 / 雙飛翼布局的實現

binta 發布于2019-04-22 16:12 / 1371人閱讀

摘要：先讓它們浮動，并給和一個固定寬度，寬度，清除浮動流，結果變成上面這樣。

工作的越久，有些基礎知識我們可能就逐漸淡忘了，今天我們來回顧一下css的圣杯布局和雙飛翼布局，

這兩個名詞你可能不熟，那三欄布局你肯定就非常熟悉了，

就是兩邊定寬，中間自適應的布局?

1 ，圣杯布局?

 !--三欄布局-- 
 header 三欄布局 /header 
 div 
 div center /div 
 div left /div 
 div right /div 
 /div 
 footer footer /footer

首先HTML結構是這樣的，因為要保證中間的結構先渲染，所以 center 要放在最前面。

*{
 margin: 0;
 padding: 0;
body{
 min-width: 700px;
header , footer{
 background-color: antiquewhite;
 text-align: center;
footer{
 clear: both;
.container{
 height: 200px;
.container .column{
 float: left;
 position: relative;
 height: 100%;
.center{
 width: 100%;
 background-color: tomato;
.left{
 width: 200px;
 background-color: aqua;
.right{
 width: 200px;
 background-color: chartreuse;
}

先讓它們浮動，并給left 和 right 一個固定寬度， center寬度100%，

footer清除浮動流，結果變成上面這樣? 。

然后我們要把 left? 和 right 放上去? ?

先把left 放上去? ：

.left{
 width: 200px;
 background-color: aqua;
 margin-left: -100%;
}

加上一個 margin-left 為? 負的自己的寬度? ，變成了這樣：

?我們可以看到 center的文字被 left? 蓋住了? ，所以給container加一個padding?

.container{
 height: 200px;
 padding: 0 200px;
}

變成了這樣：

由于加了padding，內容區域變小， left 也跟過來了，所以要給left設置一個left:

.left{
 width: 200px;
 background-color: aqua;
 margin-left: -100%;
 left: -200px;
}

這樣left 就到最左邊了， center文字也出來了，同理right

.right{
 width: 200px;
 background-color: chartreuse;
 margin-left: -100%;
 right: -100%;
}

最終效果：

2? ?雙飛翼布局（始于淘寶的UED）

和圣杯布局差不多，不同之處在于它們處理中間部分被兩邊蓋住的方法不同

雙飛翼布局給center加了一個inner center ，而不是在最外層加container

HTML：

 header 雙飛翼布局 /header 
 div 
 div 
 center
 /div 
 /div 
 div left /div 
 div right /div 
 footer footer /footer

然后給 inner-center? 加margin? (只列出關鍵代碼) :

.center .inner-center{
 margin-left: 200px;
 margin-right: 200px;
 height: 100%;
 background-color: tomato;
.left{
 width: 200px;
 background-color: aqua;
 margin-left: -100%;
.right{
 width: 200px;
 background-color: chartreuse;
 margin-left: -200px;
}

最終效果和圣杯布局一樣。。。。。。

GPU云服務器云服務器圣杯布局雙飛翼布局 android布局的實現 css布局

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

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

CSS布局--圣杯布局和雙飛翼布局以及使用Flex實現圣杯布局

摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應，其中某部分內容比其他內容高的時候，保證三者元素等高。雙飛翼用在外層多加了一個然后改用。前言我曾一度覺得總寫css的前端很low，有了這種思想以后我便遠離網頁布局，H5的工作更不想接，沉迷于頁面邏輯和封裝組件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但后來靜...

zqhxuyuan 2019-08-30 14:11 評論0 收藏0
CSS三欄布局的經典實現方法

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

neuSnail 2019-08-30 15:56 評論0 收藏0
CSS三欄布局的經典實現方法

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

Forelax 2019-08-02 14:31 評論0 收藏0
CSS 圣杯布局 / 雙飛翼布局的實現

摘要：先讓它們浮動，并給和一個固定寬度，寬度，清除浮動流，結果變成上面這樣。工作的越久，有些基礎知識我們可能就逐漸淡忘了，今天我們來回顧一下css的圣杯布局和雙飛翼布局，這兩個名詞你可能不熟，那三欄布局你肯定就非常熟悉了，就是兩邊定寬，中間自適應的布局? 1 ，圣杯布局?? 三欄布局 center left right footer 首先HTML結構...

Aldous 2019-04-23 11:40 評論0 收藏0
CSS 圣杯布局 / 雙飛翼布局的實現

摘要：先讓它們浮動，并給和一個固定寬度，寬度，清除浮動流，結果變成上面這樣。工作的越久，有些基礎知識我們可能就逐漸淡忘了，今天我們來回顧一下css的圣杯布局和雙飛翼布局，這兩個名詞你可能不熟，那三欄布局你肯定就非常熟悉了，就是兩邊定寬，中間自適應的布局? 1 ，圣杯布局? !--三欄布局-- header 三欄布局 /header div div cent...

LuDongWei 2019-04-22 16:34 評論0 收藏0