目录
不同于之前所看的左右定宽,中间自适应。圣杯与双飞翼 是另外两种写法。
反正不管是圣杯还是双飞翼,最后结果都是如下图所示。
DOM上, 中间的放首位,然后是左边,右边。 为了优先显示中间主要部分,故先构建中间main部分。
一、圣杯布局
使用float
布局框架 ,position: relative
定位, margin
为负值 。
1.1 代码实现
CSS部分
body{
min-width: 550px;
}
*{
margin: 0;
padding: 0;
}
.header, .footer{
background: palevioletred;
width: 100%;
}
.footer{
clear: both; /*清除中间盒子浮动产生的影响*/
}
.left,.right,.center{ /*左、右、中间盒子*/
float: left;
position: relative;
min-height: 130px;
}
.main{ /*包括左中右的外部区域*/
padding: 0 220px 0 200px; /*避免被左右区域覆盖,把中间部分的内容拉出来*/
}
.center{ /*中间*/
width: 100%;
background: cornflowerblue;
}
.left{ /*左*/
margin-left: -100%; /*把left从下一行拉到上一行最左边*/
background: plum;
width: 200px;
left: -200px; /*对left区域还原*/
}
.right{ /*右*/
background: powderblue;
width: 220px;
margin-left: -220px; /*把right从下一行拉到上一行最右侧*/
right: -220px; /*对right区域还原*/
}
DOM部分
<body>
<div class="header">头部</div>
<div class="main">
<div class="center">中间中间中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">底部</div>
</body>
效果图:
缺点:正常情况下是没有问题的,但是当中间部分的宽小于左侧部分时就会发生布局混乱。如下图所示:
1.2 详细过程解析
操作步骤:
- 将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到)
- center部分 width:100%占满
- 此时center占满了,所以要把left拉到最左边,使用margin-left:-100%
- 这时left拉回来了,但会覆盖center内容的左端,要把middle内容拉出来,所以在外围main加上 padding:0 220px 0 200px
- center内容拉回来了,但left也跟着过来了,所以要还原,就对left使用相对定位 left:-200px 同理,right也要相对定位还原 right:-220px
- 到这里大概就自适应好了。如果想main高度保持一致可以给left center right都加上min-height:130px
1)设置中间部分 width:100%占满。此时左边和右边区域被挤到下一行
2)使用margin-left:-100%,把left拉到最左边。left拉回来了,但会覆盖middle内容的左端
3)要把middle内容拉出来,所以在外围盒子main加上 padding:0 220px 0 200px:
其中220px 和 200px 分别为右区域、左区域的宽。
4) middle内容拉回来了,但left也跟着过来了,所以要还原,就对left使用相对定位 left:-200px 同理,right也要相对定位还原 right:-220px(200px为左盒子宽度,220px为右盒子宽度)
二、双飞翼布局
双飞翼布局是阿里提出来的,与 圣杯有以下三点区别:
- 圣杯布局 需要 浮动与相对定位(为左右区域添加left、right), 而 双飞翼 只需要浮动;
- 双飞翼 在中间部分 加了一层 容器,所以Dom结构就不一样;
- 圣杯布局 是通过父元素main的 pddding 来为 left,right 预留空间; 而双飞翼 是通过中间盒子内部区域的margin 来显示完整middle 的内容。
2.1 代码实现
CSS部分
body {
min-width: 550px;
}
* {
margin: 0;
padding: 0;
}
.header,
.footer {
height: 30px;
background: powderblue;
}
.footer {
clear: both;
}
.right,
.left,
.center {
float: left;
min-height: 130px;
}
.center .center-inner {
margin: 0 220px 0 200px;
/*通过给中间内层的容器添加margin,解决中间部分内容被覆盖*/
min-height: 130px;
}
.center {
width: 100%;
background: plum;
}
.left {
margin-left: -100%;
width: 200px;
background: palevioletred;
}
.right {
margin-left: -220px;
width: 220px;
background: grey;
}
DOM部分
<body>
<div class="header">头部</div>
<div class="main">
<div class="center">
<div class="center-inner">中间中间中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">底部</div>
</body>
2.2 详细过程解析
操作步骤:
- html代码中,center要放最前边,再放 left 、right;
- 将center、left 、right 都float:left;
- 将center占满 width:100%(中间区域的外层);
- 此时center占满了,所以要把left拉到最左边,使用margin-left:-100% 同理 right使用margin-left:-220px;(步骤1-4和圣杯布局一致);
- middle内容被覆盖了吧,除了使用外围的padding(圣杯布局的方法),还可以考虑使用margin(双飞翼布局的方法),给中间区域的增加一个内层盒子center-inner, 然后为center-inner添加 margin:0 220px 0 200px;
不同之处:
1)添加margin,解决中间内容被覆盖问题
2)仅只用margin把左右区域拉回到相应位置,不需要使用相对定位
3)当中间部分的宽小于左侧部分时,不会发生布局混乱
三、圣杯布局和双飞翼布局的区别
- 圣杯布局:左右区域占据的是其父元素的padding值部分;双飞翼布局:左右区域占据的是中间部分center-inner的margin部分;
- 圣杯布局 需要 浮动与相对定位(为左右区域添加left、right), 而 双飞翼 只需要浮动;
- 圣杯局部:中间区域宽度小于左侧区域宽度时,会造成布局混乱(缺点);
- 双飞翼布局:多加了一层dom节点(缺点);
- 双飞翼布局:支持各种宽高变化,通用性强(优点);
- 圣杯布局:结构简单,无需多余的dom节点(优点);