CSS 圣杯布局

tianlai 發布于2019-08-02 11:02 / 2546人閱讀

摘要：圣杯布局編輯使用彈性布局會十分簡單，具體參考文末部分顧名思義左杯柄，圣杯本身，右杯柄效果圖要求三列布局，中間寬度自適應，兩邊定寬中間欄要在瀏覽器中優先展示渲染代碼部分框架在最前面，保證優先級加載設置解釋左右與左杯柄右杯柄的

Holy Grail layout 圣杯布局

PS:2018/12/28編輯：使用彈性布局會十分簡單，具體參考文末部分

顧名思義：左杯柄，圣杯本身，右杯柄

效果圖

要求

三列布局，中間寬度自適應，兩邊定寬；
中間欄要在瀏覽器中優先展示渲染；

代碼部分

HTML框架


  main
  
  left
  
  right

main在最前面，保證優先級加載

CSS設置

.left, .main, .right {
  min-height: 600px;
  float:left;
  position: relative;
}
.left {
  left: -200px;
  background-color:grey;
  width: 200px;
  margin-left: -100%;
}
.main {
  background-color: blue;
  width: 100%;
}
.right {
  left:300px;
  background-color: red;
  width: 300px;
  margin-left: -300px;
}
.container{
  padding: 0 300px 0 200px;
}
.container::after{
  padding: 0 300px 0 200px;
  clear: both;
  visibility: hidden;
  height:0;
  content: "";
  display: block;
}

解釋

container 左右padding與左杯柄右杯柄的width相等，保證圣杯內容不被遮住

margin-left: -100%;

將左右杯柄定位到main的同行，實現塊級元素同行顯示的效果

左右杯柄及圣杯的position：relative屬性，用來控制左右杯柄的定位

.container::after清除container浮動，與container平級的元素不會被container蓋住

增加內容：彈性布局

CSS部分

.mainContainer {
  display: flex;
  flex-direction: row;
}
.mainContainer>div {
  height: 600px;
}
.mainContainer>div:first-child {
  width: 200px;
  background-color: black;
}
.mainContainer>div:nth-last-child(2) {
  flex-grow: 1;
  background-color: grey;
}
.mainContainer>div:last-child {
  width: 300px;
  background-color: black;
  margin-left: auto;
}

云服務器 GPU云服務器圣杯布局 css布局 css布局教程學習css布局

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52724.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