聖杯布局與雙飛翼布局全解
阿新 • • 發佈：2019-03-23
註意 bubuko nbsp 實現 自適應 lte .com 相對定位 data-
效果簡圖如下：
1、聖杯布局
註意middle寫在前面就行了，dom結構如下：
DOM: <body> <div id="hd">header</div> <div id="bd">
<div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div>
<div id="footer">footer</div> </body>
相對應的CSS內容如下：
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
/*左右欄通過添加負的margin放到正確的位置了，此段代碼是為了擺正中間欄的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左欄上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中間欄的位置擺正之後，左欄的位置也相應右移，通過相對定位的left恢復到正確位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
</style>
2、雙飛翼布局
DOM代碼如下：
<body> <div id="hd">header</div>
<div id="middle">
<div id="inside">middle</div>
</div> <div id="left">left</div> <div id="right">right</div> <div id="footer">footer</div> </body>
雙飛翼布局是在middle的div裏又插入一個div，通過調整內部div的margin值，實現中間欄自適應，內容寫到內部div中。
CSS代碼如下：
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
float:left;
width:100%;/*左欄上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*給內部div添加margin，把內容放到中間欄，其實整個背景還是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*記得清楚浮動*/
height:50px;
background: #666;
text-align: center;
}
</style>
聖杯布局與雙飛翼布局全解