圣杯布局的实现

什么是圣杯布局

  • 上部(header)和下部(footer)各自占领屏幕所有宽度。
  • 上下部之间的部分(container)是一个三栏布局。
  • 三栏布局两侧宽度不变，中间部分自动填充整个区域。
  • 中间部分的高度是三栏中最高的区域的高度。

浮动方式实现

点击预览

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>圣杯布局-float</title>
 7     <style>
 8         header,footer{
 9             background-color: lightblue;
10             line-height: 3em;
11             text-align: center;
12             margin: 0;
13         }
14         footer{
15             clear: both;
16         }
17         h3{
18             margin: 0;
19         }
20         .container{
21             padding: 0px 220px 0px 200px;
22         }
23         .middle{
24             float: left;
25             background-color: lightcoral;
26             height: 200px;
27             width: 100%;
28         }
29         .left{
30             background-color:lightgreen;
31             float: left;
32             height: 200px;
33             width: 200px;
34             margin-left: -100%;
35             position: relative;
36             left: -200px;
37         }
38         
39         .right{
40             float: left;
41             background-color: lightgoldenrodyellow;
42             height: 200px;
43             width: 220px;
44             position: relative;
45             margin-left:-220px;
46             right: -220px;
47         }
48         .content{
49             padding: 10px 20px;
50         }
51     </style>
52 </head>
53 <body>
54     <header>
55         <h3>header</h3>
56     </header>
57 
58     <div class="container">
59         
60         <div class="middle">
61             <div class="content">
62                 midddle
63             </div>
64         </div>
65         <div class="left">
66             <div class="content">
67                 left
68             </div>
69         </div>
70         <div class="right">
71             <div class="content">
72                 right
73             </div>
74         </div>
75     </div>
76 
77     <footer>
78         <h3>footer</h3>
79     </footer>
80 </body>
81 </html>

其中关于浮动布局的 margin: 负边距的疑惑，请看

 
 

 Flex方式实现

  
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>圣杯布局-flex</title>
 7     <style>
 8         header,footer{
 9             background-color: lightblue;
10             line-height: 3em;
11             text-align: center;
12             margin: 0;
13         }
14         h3{
15             margin: 0;
16         }
17         .container{
18             display: flex;
19             flex-direction: row;
20         }
21         .left{
22             background-color: lightgreen;
23             width:20%
24         }
25         .right{
26             background-color: lightgoldenrodyellow;
27             width:20%
28         }
29         .middle{
30             background-color: lightcoral;
31             flex: 1;
32             min-height: 300px;
33         }
34         .content{
35             padding: 10px 20px;
36         }
37     </style>
38 </head>
39 <body>
40     <header>
41         <h3>header</h3>
42     </header>
43 
44     <div class="container">
45         <div class="left">
46             <div class="content">
47                 left
48             </div>
49         </div>
50         <div class="middle">
51             <div class="content">
52                 midddle
53             </div>
54         </div>
55         <div class="right">
56             <div class="content">
57                 right
58             </div>
59         </div>
60     </div>
61     <footer>
62         <h3>footer</h3>
63     </footer>
64 </body>
65 </html>

 

 
  
 
 
 
 

posted @ 2020-09-23 14:42  Olebaba  阅读(123)  评论(0)  编辑  收藏  举报