关于双飞翼布局与圣杯布局探究

侯冲，王利众

（中央民族大学信息工程学院，北京100081)

关于双飞翼布局与圣杯布局探究

侯冲，王利众

（中央民族大学信息工程学院，北京100081)

从21世纪初开始，随着互联技术迅速发展与普及，网页已成为人们获取和交流信息的主要工具之一。为了构建一个合理的美观的网页，该文对常用的两款CSS布局方式“双飞翼布局”和“圣杯布局”进行了研究。双飞翼布局和圣杯布局把网页分成三栏，两边两栏宽度固定，中间自适应，以达到所需效果。

CSS布局；自适应；双飞翼布局；圣杯布局

1 div与css组合

随着互联网的发展，网页在互联网领域中的作用不言而喻，制作一个网页，如何合理的进行布局一直是各前端工程师的思考的难题，传统的布局主要是框架布局，层布局和表格布局，但是这些传统布局或者应用范围较差，或者兼容性差，或者设计复杂不便于修改。

DIV+CSS进行布局，div起到元素定位作用，配合CSS(Cas⁃cading Style Sheet层叠样式表)对页面颜色布局大小等效果控制作用，可以实现网页页面内容与网页外观变现相分离，并且css文件可以单独保存降低了网页体积容量，提高网页加载速度，并且也容易被搜索引擎搜索到，便于维护，目前网站设计中多采用这种方式进行定位布局。

2 圣杯布局与双飞翼布局

圣杯布局与双飞翼布局是两种常用的DIV+CSS布局方式，它们都是实现了一种常见的布局效果，即是把页面分成三栏，两边两栏的宽度固定，而中间的那一栏的宽度是自适应，且放在前面首先渲染，所谓自适应即是根据显示页面的宽度，或者说当拖动浏览器页面宽度变化时，自适应区域会随着变化。如图所示，图1和图2是同一页面被拖动不同宽度的效果，两边宽度不变，而中间宽度会随之变化。

2.1 圣杯布局

在html代码中，middle部分首先要放在container的前面部分，然后是left，right。先将middle、left、right三者都设置float: left,position:relative(因为后面相对定位会用到）。Middle部分设置width:100%占满一行，此时middle占满一行，left,right部分因为浮动应排列在后面（事实上containter宽度不够则会挤压到下面）如图2所示：

图1 浏览器三栏模式

图2 三栏浮动

当要把left拉到middle所在行的最左边，就要使用marginleft:-100%，这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端如图3所示：

图3 左栏拉回左边

要把middle内容拉出来，所以在外围container加上pad⁃ding:0 210px，middle内容拉出来了，但left也跟着出来了如图4所示：

图4 中间栏拉出来

所以要还原，就对left使用相对定位left:-210px如图5所示：

图5 左栏定位左边

同理，right要拉到middle所在行的最右边，使用marginleft:-210px，right:-210px，如图6所示：

图6 三栏结构

html文档代码如下：

2.2 双飞翼布局

html代码中，middle部分首先要放在container的最前部分，然后是left，right。将三者都设置float:left，middle设置width: 100%占满一行，此时middle占满一行如图7所示：

图7 三栏浮动

所以要把left拉到middle所在行的最左边，使用marginleft:-100%，如图同理right使用margin-left:-200px，如图8所示：

图8 左右栏拉进中间栏

此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div—middle_content,然后设置margin:0 210px如图9所示：

图9 中间栏划出内容区域

Html文档代码如下：

3 圣杯布局与双飞翼布局对比

圣杯布局和双飞翼布局这两种布局方式在为实现这种效果时的解决方案在前一半都是相同的，它们都让这三栏全部进行float浮动，但是在左右两栏部分要加上负的margin让其与中间的div并排，这样来形成三栏布局。

但是这两种布局方式在解决中间栏div的内容不被遮挡的问题时的解决思路是不一样的：

圣杯布局，为了使中间的div内容不被遮挡，它将中间div部分设置了左右padding-left和padding-right后，然后又将左右两个div部分使用相对布局position:relative并两者分别配合right和left的属性，就可以使左右两栏的div部分移动后不会遮挡中间的div。

双飞翼布局，为了使中间的div部分的内容不被遮挡，可以直接在中间的div的内部创建子div用来放置内容，然后在这个子div里面使用margin-left和margin-right为左右两栏div留出位置。

4 结束语

本文列举DIV+CSS常用的布局方式：圣杯布局和双飞翼布局，对着两种布局方式进行了深入的探讨，这两种布局方式使网页布局变得简洁明了而且满足对不同宽度的显示需求，便于初学者使用。在网页制作过程中可以将页面的划分为不同的小区域块，然后放到每一个DIV中，这就可以使用DIV+CSS布局，然后再利用CSS对每一个DIV块进行编辑加工处理，就可以使页面达到我们想要的效果，并且可以达到结构、表现和行为的分离的效果。这样使用DIV+CSS布局可以提高网页的开发速度，还可以在后期的网页维护上也能提高效率。如今DIV+CSS组合的布局技术也是多种多样的，可以根据自己的需求选择合理的布局方式进行研究应用。

[1]闫娜.初探DIV+CSS在网页优化中的应用[J].科技资讯, 2017(5):38-39.

[2]王海榕.DIV+CSS技术在网页布局中的应用[J].电子技术与软件工程,2017(7):14.

[3]黄楚鹏.基于CSS页面布局的网页设计[J].电脑知识与技术,2017(4):45.

[4]曾顺.精通CSS+DIV网页样式与布[M].北京:人民邮电出版社,2007.

Explore the Flying Wing Layout and the Holy Grail Layout

HOU Chong,WANG Li-zhong
(Minzu University of China College of Information and Engineering,Beijing 100081,China)

From the beginning of the 21st century,with the rapid development and popularization of Internet technology,Web⁃pages have become one of the main tools for people to access and exchange information.In order to build a reasonable and beau⁃tiful webpage,the article explores the two commonly used CSS layout”The Flying wing layout”and“the Holy Grail layout”. Flying wing layout and Holy Grail layout divide the webpage into three columns,and the width of thetwo side columns are fixed,the middle of the webpage is adaptive.

CSS layout;adaptive;The Flying wing layout;the Holy Grail layout

TP311

A

1009-3044(2017)19-0178-02

2017-05-16

侯冲(1990—），男，山东枣庄人，中央民族大学研究生，研究方向为现代教育技术。