1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>双飞翼</title> 6 <style> 7 div { 8 min-height: 300px; 9 display:block; 10 } 11 .div { 12 width: 100%; 13 background-color: blue; 14 margin:0 auto; 15 } 16 .main { 17 width:100%; 18 background:red; 19 float:left; /* 先定主体 */ 20 } 21 .left { 22 float:left; 23 background:yellow; 24 margin-left:-100%; /* 关键！ 确定左边翅膀 */ 25 width:300px; 26 } 27 .right { 28 float:left; 29 background: yellow; 30 width: 200px; 31 margin-left:-200px; /* 关键！ 确定右边翅膀 */ 32 } 33 .mainframe { /* 关键！ 因主体被挡住，因此需要 两边留出空白，把主体内容聚在中间集中显示 */ 34 margin-left: 300px; 35 margin-right: 200px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="div"> 41 <div class="main"> 42 <div class="mainframe"> 43 这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容 44 </div> 45 </div> 46 <div class="left">这是左边内容</div> 47 <div class="right">这是右边内容</div> 48 </div> 49 </body> 50 </html>
双飞翼布局的思路是
先把 整个布局的 “主体” 确定好
然后再确定 “翅膀” 的位置
最后根据 “翅膀” 的大小，给 “主体” 部分两边留白。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圣杯</title>
<style>
div {
min-height: 300px;
display: block;
}
.div {
margin: 0 auto;
padding: 0 200px 0 300px; /* 防止左右两边挡住内容 */
}
.main,.left,.right {
float: left;
position: relative; /* 后面需要用到 left */
}
.main {
100%;
background-color: red;
}
.left {
300px;
background-color: yellow;
margin-left: -100%; /* 移动到主体的左边部分 */
left: -300px; /* 使用相对定位, 将左边部分移动到父框架的 左边 padding 部分 */
}
.right {
200px;
background-color: yellow;
margin-left: -200px; /* 移动到主体的右边部分 */
right: -200px; /* 使用相对定位，讲右边部分移动到父框架的 右边 padding 部分 */
}
</style>
</head>
<body>
<div class="div">
<div class="main">
这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子
</div>
<div class="left">这是左边内容</div>
<div class="right">这是右边内容</div>
</div>
</body>
</html>
圣杯布局的思路是
先 左右两边框利用 margin-left 移动到相应的位置
然后 利用 主体 的padding 部分 给 左右两边框留白
接着 左右两边框 利用 relative 的 left 和 right 移动到留白的部分
双飞翼布局 和 圣杯布局 的优点 在于
1、自适应布局，两边的宽度确定好后，主体部分可以随着窗口的变化而变化
2、主体 部分 在 HTML文档里在 “翅膀” 部分的前面，浏览器会优先加载 重要的主体部分，加载完毕 再去加载 次要部分。
两者都采用了 margin-left 来定位左右边框，只是对 主体 的遮挡部分处理的方式不一样。
双飞翼布局是采用了 添加一个子框架,然后利用子框架的 margin-left 和margin-right 将内容从遮挡处移出来；
而圣杯布局则采用了 主体部分的 padding ,利用该属性 给两边留白,然后左右部分则采用 relative 的left 和right 移出 主体部分,
移到 主体部分的 padding区域。