圣杯布局和双飞翼布局
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局均是上中下结构,其中,中间部分又分为左中右三部分,左右两侧宽度固定,中间部分宽度自适应;上中下的结构比较简单,使用三个div就可以实现,中间部分的左右两侧内容宽度固定,中间内容宽度自适应,实现起来就比较有技巧性,具体如下:
1、圣杯布局:
圣杯布局的html结构:
<div class="container">
<div class="header">header</div>
<div class="main">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
圣杯布局中比较重要的就是中间部分样式的设置:
1、让左、中、右均浮动,(浮动会造成父元素高度坍塌,注意清除浮动带来的影响)
.center, .left, .right{
float: left;
}
// 父元素解决浮动导致的高度坍塌
.main{
overflow: hidden;
}
2、左右两侧宽度固定,中间宽度设置为100%,(方便观察效果,为左中右设置最小高度)
.left, .right{
width: 200px;
}
.center{
width: 100%;
}
.center, .left, .right{
min-height: 500px;
}
3、由于中间宽度100%,左中右均浮动,所以左右两侧会在换行显示,为了让左右两侧与中间部分在一行,分别为左右两侧分别设置负地margin值,对于左侧:margin-left: -100%;
(margin值为百分比时,其值是相对于父元素的宽度来计算的),对于右侧:margin-left: 负的右侧宽度;
,这样一来,左中右三部分就处于同一行了
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
4、这个时候会存在一个问题:就是左右两侧会覆盖住中间部分的内容,为了解决这个问题,需要给父元素设置padidng,左右padding的值分别为左右两侧的宽度
.main{
padding: 0 200px;
}
5、父元素设置完后padding后,页面中左右两侧会出现空白,这时候通过相对定位以及left、right属性分别将左右两侧移动到空白处,至此圣杯布局的中间部分就完成了!!!
.left{
position: relative;
left: -200px;
}
.right{
position: relative;
right: -200px;
}
2、双飞翼布局:
双飞翼的html结构:
<div class="container">
<div class="header">header</div>
<div class="main">
<div class="center">
<!-- 添加一个子标签来显示中间内容 -->
<div class="content">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
双飞翼中间部分样式的设置:
1、让左、中、右均浮动,(浮动会造成父元素高度坍塌,注意清除浮动带来的影响)
.center, .left, .right{
float: left;
}
// 父元素解决浮动导致的高度坍塌
.main{
overflow: hidden;
}
2、左右两侧宽度固定,中间宽度设置为100%,(方便观察效果,为左中右设置最小高度)
.left, .right{
width: 200px;
}
.center{
width: 100%;
}
.center, .content, .left, .right{
min-height: 500px;
}
3、由于中间宽度100%,左中右均浮动,所以左右两侧会在换行显示,为了让左右两侧与中间部分在一行,分别为左右两侧分别设置负地margin值,对于左侧:margin-left: -100%;
(margin值为百分比时,其值是相对于父元素的宽度来计算的),对于右侧:margin-left: 负的右侧宽度;
,这样一来,左中右三部分就处于同一行了
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
4、这个时候会存在一个问题:就是左右两侧会覆盖住中间部分的内容,为了解决这个问题,双飞翼通过为中间部分添加一个子元素,为子元素设置margin来防止中间内容被覆盖,至此双飞翼布局的中间部分就完成了!!!
.content{
margin: 0 200px;
}
从上面的实现过程中可以看出:双飞翼布局与圣杯布局有相似之处,也有不同之处,相似之处在于也是让中间的左中右三部分浮动,并通过负的margin值让左右两侧与中间部分处于一行;不同之处在于在解决中间内容被左右两侧覆盖时,圣杯布局通过向父元素添加padding和利用左右两侧的相对定位来处理,双飞翼则是通过为中间部分添加一个子标签,通过设置子标签的margin值来处理中间内容被覆盖;
3、flex实现圣杯布局:
上面的是利用css2方式来实现的,下面给出一个利用css3的flex弹性布局来实现的圣杯布局:
html结构:
<div class="container">
<div class="header">header</div>
<div class="main">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
css样式:
.container{
display: flex;
// 定义主轴为竖直方向
flex-direction: column;
}
.header, .footer{
// 上下结构高度固定
flex: 0 0 80px;
}
.main{
// 中间部分设置display为flex
display: flex;
flex: 0 0 auto;
}
.left, .right, .center{
// 中间部分设置最低高度
min-height: 500px;
}
.left, .right{
// 左右两侧宽度固定
flex: 0 0 200px;
}
.left{
// 通过设置order将左侧部分排列靠前
order: -1;
}
.center{
// 中间内容宽度自适应
flex: 1 1 auto;
}
参考文献:
[1] 圣杯和双飞翼布局介绍