标签：golden title pad box code back 适应 contain body
这两种模型都是为了做到一种左右固定中间自适应的效果，听到的有人对于圣杯布局和双飞翼布局的描述很形象，首先一个圣杯的左右把柄和圣杯是一体的，所以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>
标签：golden title pad box code back 适应 contain body
原文地址：https://www.cnblogs.com/xzsblog/p/13210755.html
