什么是圣杯布局、双飞翼布局?

  • A+
所属分类:css/css3

简单介绍

圣杯布局和双飞翼布局解决的问题是一样的,就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。

但是圣杯布局和双飞翼布局在实现方式上有一点差别。

圣杯布局

HTML片段如下:

<div id="container">
    <div id="main" class="col">
    #main
    </div>
    <div id="left" class="col">
    #left
    </div>
    <div id="right" class="col">
    #right
    </div>
</div>

 

废话不多说,代码很清晰,主体main放置在最前面可以优先加载。

CSS片段如下:

body {min-width: 550px;}
.col {position: relative;float: left;}

#container {padding: 0 190px 0 190px;}

#main {width: 100%;height: 400px;background-color: #ccc;}

#left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}

#right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}

三个col都设置float: left,为了把left和right定位到左右部分,采用负边距,left部分margin-left: -100%,right部分margin-right: -190px
什么是圣杯布局、双飞翼布局?

当设置完了之后,虽然左右栏定位成功,但是中间main的内容会被遮盖住。所以在main的父元素Container中设置左右padding值。给所有col设置position: relative,再分别给左右栏添加left、right值,使他们定位到正确位置。

什么是圣杯布局、双飞翼布局?

双飞翼布局

HTML片段:

<div id="container">
    <div id="main" class="col">
        <div id="main-wrap">
            #main
        </div>
    </div>
    <div id="left" class="col">
    #left
    </div>
    <div id="right" class="col">
    #right
    </div>
</div>

与圣杯布局相比,双飞翼HTML中为main添加了一个子元素main-wrap,这个小小的改动是为了之后处理main中内容被遮盖的问题,这也是两者实现方式最大的不同点,下面继续。

CSS片段:

body {min-width: 550px;}
.col {float: left;}

#main {width: 100%;height: 400px;background-color: #ccc;}

#main-wrap {margin: 0 190px 0 190px;}

#left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}

#right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}

与圣杯布局一样,一开始三个col都设置float: left,为了把left和right定位到左右部分,采用负边距,left部分margin-left: -100%,right部分margin-right: -190px

之后就是处理main中内容的遮盖问题,只需设置main-wrap的左右外边距即可解决。

相比圣杯布局,双飞翼不必设置左右栏的position: relative,也不必设置左右left、right值,只需多添加一个子元素包含,相应的padding换成margin。总的说来简单不少。效果图如上,就不再添加了。

双飞翼布局的好处:

  1. 主要的内容先加载的优化;
  2. 兼容目前所有的主流浏览器,包括IE6在内;
  3. 实现不同的布局方式,可以通过调整相关CSS属性即可实现。
weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
青青子衿

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: