圣杯布局和双飞翼布局也是实现二&三列布局的有效方式,我将在本文中记录它们的原理和实现。
圣杯布局
原理:圣杯布局在所有列的最外层增加了一个含有padding的wrapper,通过定位,负边距将两个侧边栏移动至wrapper的padding处,实现三列布局。
实现步骤:
- 进行wrapper的padding设置,使其大于等于对应边栏的宽度,用来容纳边栏。
- 对两个侧边栏设置左浮动,使其紧贴主栏下面的左侧。(在HTML中先写浮动的主栏。)
- 对边栏设置负margin(左栏-100%,使其恰好到达wrapper内容区的左边界;右栏-(右栏width),使其恰好到达wrapper内容区的右边界。
- 对边栏设置相对定位使其由wrapper内容区进入padding。
<div id="bd">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.main {
float: left;
width: 100%;
height: 400px;
background-color: darkgray;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
height: 400px;
background-color: aqua;
}
.right {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
height: 400px;
background-color: blue;
}
#bd {
padding: 0 230px 0 190px;
background-color: green;
}
效果图:
双飞翼布局
双飞翼布局不将容纳边栏的留白设置在一个包含所有栏的wrapper中,而是在主栏上设置margin用来容纳侧栏,这样就省略了将侧栏拉到主栏那一行后进行的relative定位(因为双飞翼布局留白就在父元素的内容区,而圣杯布局的留白在父元素内容区之外)。
<div class="bd">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
.main {
height: 400px;
margin: 0 230px 0 190px;
background-color: darkgray;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
height: 400px;
background-color: aqua;
}
.right {
float: left;
width: 230px;
margin-left: -230px;
height: 400px;
background-color: blue;
}
.bd {
float: left;
width: 100%;
height: 400px;
background-color: cadetblue;
}
效果图:
注意:
为什么不将margin设置在bd中?
注意width大小是不包含margin的,如果将margin设置在bd中,width就不好确定了(如果width=100%;该元素实际大小为width+margin已经超出屏幕),因此让bd的width=100%,在其内部的main中设置margin来容纳侧栏。
为什么要将bd设置为float?
在圣杯布局中也将主栏设置为了float,当不将其设置为float时,不能通过negative margin将下面的浮动元素提升到上一行,而只是将下面的浮动元素移动到同一行超出屏幕范围的位置。在双飞翼布局中将bd设置为float的道理和它是相同的。