2. 程式人生 > >css——聖杯布局

css——聖杯布局

阿新 • • 發佈：2019-01-23
mpat spl edge float nta footer char styles tex

聖杯布局要求

  • header和footer各自占領屏幕所有寬度，高度固定
  • 中間dontainer部分為左中右三欄式布局
  • 三欄布局中左右兩側寬度固定，中間部分自動填充

實現方式

1.浮動

  • 先定義header和footer的樣式，使其寬度撐滿，高度隨意
  • container中三列設置為浮動和相對定位，且center部分放在最起那麽，對footer設置clear:both;清除浮動
  • 三列中的左右定寬200px，中間設置100%
  • 由於浮動關系，center會撐滿container，左右會被擠下去，給left添加margin-left:-100%,使left回到上一行的最左側
  • 會發現left遮住了center部分，給container設置padding-left:200px;padding-right:200px;
    ,給left和right騰出位置；
  • 這時的left由於padding的原因並不在最左側，之前設置了定位，可以給left添加right:200px,使left回到最左側
  • 對於right可以設置margin-right:-200px;，使其回到第一行

最好設置一個最小寬度防止頁面變形

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7
 
     <title>聖杯布局</title>
 8     <link rel="stylesheet" href="">
 9 </head>
10 <style type="text/css" media="screen">
11     /**
12      聖杯布局要求
13         1.header和footer各自占領屏幕所有寬度，高度固定。
14         2.中間的container是一個三欄布局。
15         3.三欄布局兩側寬度固定不變，中間部分自動填充整個區域。
16         4.中間部分的高度是三欄中最高的區域的高度。

 
17      */
18     body {
19         min-width: 600px;
20     }
21 
22     .header, .footer {
23         width: 100%;
24         height: 100px;
25         background: #ccc;
26     }
27 
28     .footer {
29         clear: both;
30     }
31 
32     .container {
33         padding: 0 200px;
34     }
35 
36     .container .column {
37         float: left;
38         position: relative;
39         height: 400px;
40     }
41 
42     #left {
43         width: 200px;
44         right: 200px;
45         background: pink;
46         margin-left: -100%;
47     }
48 
49     #right {
50         width: 200px;
51         background: red;
52         margin-right: -200px;
53     }
54 
55     #center {
56         width: 100%;
57         background: blue;
58     }
59 </style>
60 
61 <body>
62 <div class="header">header</div>
63 <div class="container">
64     <div id="center" class="column">center</div>
65     <div id="left" class="column">left</div>
66     <div id="right" class="column">right</div>
67 </div>
68 <div class="footer">footer</div>
69 </body>
70 
71 </html>

2.flex彈性布局

  • 先定義header和footer的樣式，使其寬度撐滿，高度隨意
  • container中的left、center、right依次排列
  • container設置彈性布局display：flex;
  • left、right區域定寬，center部分設置flex:1;
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>聖杯布局-flex</title>
 6 </head>
 7 <style>
 8     body{
 9         min-width: 600px;
10     }
11     .header,.footer{
12         width: 100%;
13         height: 100px;
14         background: #ccc;
15     }
16     .container{
17         display: flex;
18     }
19     .container .column{
20         height: 400px;
21     }
22     #left{
23         width: 200px;
24         background: pink;
25     }
26     #center{
27         flex: 1;
28         background: blue;
29     }
30     #right{
31         width: 200px;
32         background: red;
33     }
34 </style>
35 <body>
36 <div class="header">header</div>
37 <div class="container">
38     <div id="left" class="column">left</div>
39     <div id="center" class="column">center</div>
40     <div id="right" class="column">right</div>
41 </div>
42 <div class="footer">footer</div>
43 </body>
44 </html>

css——聖杯布局

相關推薦

CSS 聖杯布局

高度 pos 結構 cap height 左右 效果圖 pre 安全 前端的兩個經典布局想必大家都有多了解--聖杯布局和雙飛翼布局，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握。 事實上，聖杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊

css 聖杯布局三種方式

mar 常見 底部 手機版 rec -s enter absolute posit 所謂的聖杯布局就是左右兩邊大小固定不變，中間寬度自適應。我們可以用浮動、定位以及flex這三種方式來實現 一般這種布局方式適用於各種移動端頂部搜索部分，這是最常見

css——聖杯布局

mpat spl edge float nta footer char styles tex 聖杯布局要求 header和footer各自占領屏幕所有寬度，高度固定 中間dontainer部分為左中右三欄式布局 三欄布局中左右兩側寬度固定，中間部分自動填充 實現方式 1

css的聖杯布局

log lan pos position scale har main con ack 聖杯布局和雙飛翼布局實現的效果是一樣的。 代碼解析： 1.四個section，container，main,left,right。其中那個container為父容器。 2.main,le

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

clear targe 圖片 上一個 info copy OS 如果 tool 按照我的理解，其實聖杯布局跟雙飛翼布局的實現，目的都是左右兩欄固定寬度，中間部分自適應。 但在這裏實現起來還是有一些區別的 【聖杯布局】 在這裏，實現了左(200px) 右(22

css常見布局之三列布局--雙飛翼布局和聖杯布局

class 100% ron 中間 flow 一行 自適應 聖杯布局 使用 首先兩者都是兩邊寬度固定，中間寬度自適應，並且中間盒子(主題內容)放在最前面，以便優先渲染。 實現方案：都使用浮動來實現。 聖杯布局實現如下： <!DOCTYPE html>

聖杯布局and雙飛翼布局

content 尺寸 元素 不一定 oot alt ctype 間距 mar *聖杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

雙飛翼布局和聖杯布局解析

出現 解釋 它的 詳細 部分 style image 簡單 延伸 今天突然想起了溫習一下css布局。之前看雙飛翼布局只是粗略的看了一下，大概明白怎麽做，但是並沒有去延伸一下...還有它的孿生兄弟：聖杯布局。今天仔細的琢磨了一下；突然發現其實內容還不少的樣子。 雙飛翼布局或者

聖杯布局/雙飛翼布局異同和比較

gin containe margin ont 100% oat ctype -1 main <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

響應式布局之浮動聖杯布局（雙飛翼布局）—-自適應寬度布局

由於 部分 gin asi 禁用 代碼 寬度 sof cin 前端開發中自適應布局在實際應用中越來越普遍，特別是隨著更多高級瀏覽器的出現html5和css3得到了更好的應用。 聖杯布局有個好處，完全符合前端開發中漸進增強的理念，由於瀏覽器解析是從DOM的上至下，這樣聖杯布局

聖杯布局

中間 開始 ack size style col ges float 分享 聖杯布局也就是三列布局（反正我覺得不像聖杯）,就像這樣： 中間是主要內容，兩邊是其他內容如廣告什麽的，中間的內容區是自適應大小的，而兩邊的是固定大小，可能這樣的布局很容易讓人想到用flex布局

聖杯布局和雙飛翼布局的實現過程

img sunshine 很多 toc 是把 優先 以及 watermark 完整 相信很多人都搜過聖杯布局和雙飛翼布局，也知道他們的由來，在這裏我就不一一贅述了，今天主要講的是當我遇到兩個布局時，我是怎樣一步一步從開始到實現的過程，例如：剛開始我也不懂為什麽聖杯布局和雙飛

面試-聖杯布局

ddl meta AS 布局 PE width fsdfsdf set posit 未知布局？ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l

雙飛翼布局與聖杯布局

聖杯布局 upload con 位置 container f2c apt 相對 mage 一、聖杯設計思路： DOM結構： <div class="container"> <div class="main">main</div>

使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局

head -h color ima details blue lex http eight 使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局 實現三欄水平布局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main

flex做的聖杯布局

color 彈性 mage 代碼 mpat align left device isp 　　　now，給大家分享一個用flex寫的聖杯布局，大家可以參考一下子 　　　首先聖杯布局是兩列固定寬度，中間自適應。 　　　我直接說一下步驟，上圖，上圖 　　　　 　　　1.步驟1 　

經典聖杯布局

-h styles htm sta body position img left min <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

雙飛翼布局以及聖杯布局

區域 自己 size 聖杯布局 ring ati -s position -a 雙飛翼布局和聖杯布局其實結果是一樣的，都是實現三欄布局，中間寬度自適應，兩端寬度固定，只是實現的方法不一樣 聖杯布局 　　三欄是獨立的，利用外層container的padding 以及 兩端的m

聖杯布局的理解學習筆記

ade flow 超出 head 負數 ner style oot itl 聖杯布局 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf

一個初學者對雙飛翼布局和聖杯布局的理解

head 給他 就是 固定 class ack scrip 特點 css Hi！大家好！歡迎大家進入我的博客！現在好多的大公司寫頁面的時候都會用到三欄布局，接下來要說的聖杯布局就是三欄布局中較為典型的例子。特點是，左右邊欄寬度固定，中間欄寬度自適應。廢話不多說直接上代碼。