无论是双飞翼布局还是圣杯布局,都是从下列的两个需要而产生的:
1.(基石)"center"元素必须是页面加载的第一个元素,不能放在其他的元素之后,以便加载的时候最先看到。因此,淘汰掉了浮动的方法。这个是两种布局产生的基础。
2.缩小页面的时候,“center”部分能够自适应,不会出现页面缩小了,内容也缺少了的现象。(center不需要设置高度,否则“自适应”成为空谈。)
双飞翼布局是圣杯布局的升级版本:可以不用写min-width防止网页界面缩小后变形,相对于圣杯布局,双飞翼布局CSS代码中少了给左右两侧栏定位的相关代码。但因此会要求在H5的.center结构中在增加一个.center_in.
圣杯布局的HTML结构:
<div class="container">
<div class="center">需要你写点东西,要不然页面显示不出来。</div>
<div class="left"></div>
<div class="right"></div>
</div>
圣杯布局的css:
<style>
*{
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: -100%;
position: relative;
left:-200px;
}
.right {
width: 200px;
height: 200px;
background-color: pink;
float: left;
margin-left: -200px;
position: relative;
left: 200px;
}
.center{
width: 100%;
//height: 200px;
background-color:#00b0e0;
float: left;
}
.container{
min-width:400px;//需要设置最小宽度,防止一直缩小后变形。
padding: 0 200px;
background-color: #777777;
/*float: left;*/
}
</style>
双飞翼布局HTML结构:
<div class="container">
<div class="center">
<div class="center_in">写点东西,要不然显示不了。</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
双飞翼布局的CSS:
<style>
*{
padding: 0;
margin: 0;
}
.left{
width: 200px;
height: 200px;
background-color: pink;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
height: 200px;
background-color: pink;
float: left;
margin-left: -200px;
}
.center{
//height: 200px;
width: 100%;
background-color: mediumpurple;
/*padding-left: 200px;*/
/*padding-right: 200px;*/
float: left;
}
.center .center_in{
margin-right: 200px;
margin-left: 200px;
width: 100%;
background-color: yellow;
}
</style>