圣杯布局和雙飛翼布局
1吨拍、上下高度固定隘庄，兩側(cè)寬度固定挑宠，中間寬高自適應
2螺戳、中間部分在DOM結(jié)構(gòu)上優(yōu)先穴店，以便先行渲染
3、允許三列中的任意一列成為最高列
圣杯：
<divid="header"></div>
<divid="container">
<divid="center"class="column"></div>
<divid="left"class="column"></div>
<divid="right"class="column"></div>
</div>
<divid="footer"></div>
body{
min-width:550px;
}
#container{
padding-left:200px;
padding-right:150px;
}
#container.column{
float: left;
}
#center{
width:100%;
}
#left{
width:200px;
margin-left: -100%;
position: relative;
right:200px;
}
#right{
width:150px;
margin-right: -150px;
}
#footer{
clear: both;
}
雙飛翼：
按照與圣杯布局相同的思路，首先設(shè)置各列的寬度與浮動，并且為左右兩列預留出空間奋献，以及為footer設(shè)置浮動清除：
<body>
<divid="header"></div>
<divid="container"class="column">
<divid="center"></div>
</div>
<divid="left"class="column"></div>
<divid="right"class="column"></div>
<divid="footer"></div><body>
body{
min-width:500px;
}
#container{
width:100%;
}
.column{
float: left;
}
#center{
margin-left:200px;
margin-right:150px;
}
#left{
width:200px;
margin-left: -100%;
}
#right{
width:150px;
margin-left: -150px;
}
#footer{
clear: both;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
