圣杯布局与双飞翼布局

Posted 2020-12-13 xzsblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圣杯布局与双飞翼布局相关的知识，希望对你有一定的参考价值。

　　这两种模型都是为了做到一种左右固定中间自适应的效果，听到的有人对于圣杯布局和双飞翼布局的描述很形象，首先一个圣杯的左右把柄和圣杯是一体的，所以body里面的代码是这样的：

1 <div class="container">
2     <div class="center"></div>
3     <div class="left"></div>
4     <div class="right"></div>
5 </div>

　而双飞翼布局就像一个人有两个翅膀，是另外附带的，所以body里面的代码是这样的：

1 <div class="container">
2     <div class="center"></div>
3 </div>
4 <div class="left"></div>
5 <div class="right"></div>

，下面是两个布局的总代码，跟着敲代码的时候记得一边观察页面的变化一边敲

圣杯布局：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7 
 8             .container {
 9                 height: 100%;
10                 padding: 200px;
11                 box-sizing: content-box;
12             }
13             .left,.right {
14                 min-width: 200px;
15                 float: left;
16             }
17             .center {
18                 float: left;
19                 width: 100%;
20                 height: 400px;
21                 background-color: #FF7F50;
22             }
23             .left{
24                 background-color: #ffff00;
25                 min-height: 400px;
26                 margin-left: -100%;
27                 position: relative;
28                 left: -200px;
29             }
30             .right {
31                 min-height: 400px;
32                 background-color: darkgoldenrod;
33                 margin-right: -200px;
34             }
35         </style>
36     </head>
37     <body>
38         <div class="container">
39             <div class="center"></div>
40             <div class="left"></div>
41             <div class="right"></div>
42         </div>
43         
44     </body>
45 </html>

双飞翼布局：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .container,.left,.right {float: left;}
 8             .container{width: 100%;}
 9             .center {
10                 background-color: #008000;
11                 min-height: 400px;
12                 margin: 0 200px;
13             }
14             .left,.right { width: 200px; min-width: 200px;height: 400px;}
15             .left {background-color: blue;margin-left: -100%;}
16             .right {background-color: #B8860B;margin-left: -200px;}
17         </style>
18     </head>
19     <body>
20         <div class="container">
21             <div class="center"></div>
22         </div>
23         <div class="left"></div>
24         <div class="right"></div>
25     </body>
26 </html>

以上是关于圣杯布局与双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章