双飞翼和圣杯布局都是实现一个两侧固定,中间宽度自适应的三栏布局,而且希望浏览器解析结构的时候,优先渲染中间的结构而存在的一种布局
圣杯布局与双飞翼布局要求中间的自适应部分优先渲染的,所以结构要求:
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
在圣杯布局中
需要给三个盒子中套一个父元素box
<div class="box">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
咱们先给left 样式width: 100px;height: 800px; float: left;
right样式width: 200px;height: 200px;float: left;
conten样式width: 100%;height: 400px;background: #87CEEB;float: left;
因为conten要求宽度自适应,所以width给予100%,当前布局显示为
我们先通过margin-left:将left、righ 两个div调到content的两边
将left : margin-left: -100%; right : margin-left: -200px;
此时的布局为
此时的conten 还与left跟right 相互重叠。
我们只需将最大的盒子box 添加声明:padding: 0 200px 0 100px;
然后通过 添加相对定位 将left和right 位置移动到两侧的空白处即可。
left :position: relative; left: -100px;
right :position: relative; left: 200px;
圣杯布局即可完成 而且三块div之间没有重叠的部分
效果图为
贴上代码:
.center{
width: 100%;
height: 400px;
background: #87CEEB;
float: left;
}
.left{
width: 100px;
height: 800px;
position: relative;
float: left;
background: #FFC0CB;
margin-left: -100%;
position: relative;
left: -100px;
}
.right{
width: 200px;
height: 200px;
float: left;
position: relative;
background: #7FFF00;
margin-left: -200px;
left: 200px;
}
.box{
padding: 0 200px 0 100px;
border: 10px solid saddlebrown;
overflow: hidden;
}
在双飞燕布局中
看似是三块div 其实是四块 是由给center里面包了一个小盒子,小盒子给margin挤进去的
所以布局为
<div class="center">
<div class="box"></div>
</div>
<div class="left"></div>
<div class="right"></div>
和圣杯一样 都给其加上最基本的样式
给left 样式width: 100px;height: 800px; float: left;
right样式width: 200px;height: 200px;float: left;
conten样式width: 100%;height: 400px;background: #87CEEB;float: left;
因为conten要求宽度自适应,所以width给予100%,当前布局显示为
并使用 margin-left:将left、righ 两个div调到content的两边
将left : margin-left: -100%; right : margin-left: -200px;
此时我们将content中的子元素box添加样式background: salmon;height:400px;
因为继承父元素content的width 100%所以 box的width也是100%
此时效果图为
所以我们只需要给box添加样式 margin: 0 200px 0 100px; 即可使子元素box与left和right不在重叠
只需要给box的父元素不添加背景色,或者透明色 ,即可使视觉效果显示为,三个块不重叠,且中间的块宽度自适应,但是 实际上在大块上,最大的中间是和左右重叠的
代码:
.center{
width: 100%;
height: 500px;
float: left;
/* background: #FFC0CB; */
}
.right{
float: left;
width: 200px;
height: 200px;
background: darkorange;
margin-left: -200px;
}
.left{
width: 100px;
height: 300px;
float: left;
background: cornsilk;
margin-left: -100%;
}
.box{
/* overflow: hidden; */
background: salmon;
height:400px;
margin: 0 200px 0 100px;
}