常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）

article/2025/9/27 16:13:23

1. 两栏布局,左边定宽，右边自适应

//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>

1、左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响
在这里插入图片描述

 #left{float: left;width: 200px;background: green;
}
#right{overflow: hidden;background: red;
}

2. 三栏布局,圣杯布局、双飞翼布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

先预览最终布局效果：
圣杯布局与双飞翼布局

圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div >外层标签

圣杯布局

1. DOM结构

<div id="header"></div>
<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先定义出整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面。

2. CSS代码
假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在container上设置：

#container {padding-left: 200px; padding-right: 150px;
}

为左右两列预留出相应的空间，得到如下示意图：

创建布局框架
随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：

#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px; 
}#right {width: 150px; 
}#footer {clear: both;
}

得到如下效果：
设置宽度和清除浮动
根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。

接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距:

#left {width: 200px; margin-left: -100%;
}

得到：
将left移动到预留位置-1

随后还需要使用定位(position)方法：

#left {width: 200px; margin-left: -100%;position: relative;right: 200px;
}

这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置：
将left移动到预留位置-2

接下来放置right，只需添加一条声明即可：

#right {width: 150px; margin-right: -150px; 
}

得到最终的效果图：
将right移动到预留位置
至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px：

body {min-width: 550px;
}

综上所述，圣杯布局的CSS代码为：

body {min-width: 550px;
}#container {padding-left: 200px; padding-right: 150px;
}#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px; margin-left: -100%;position: relative;right: 200px;
}#right {width: 150px; margin-right: -150px; 
}#footer {clear: both;
}

关于圣杯布局的示例，可参考：圣杯布局

双飞翼布局

1. DOM结构

<body><div id="header"></div><div id="container" class="column"><div id="center"></div></div><div id="left" class="column"></div><div id="right" class="column"></div><div id="footer"></div>
<body>

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

2. CSS代码

按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：

#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px; 
}#right {width: 150px; 
}#footer {clear: both;
}

得到如下效果示意图：
双飞翼布局初始设置

以上代码将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间。

将left放置到预留位置：

#left {width: 200px; margin-left: -100%;
}

得到：
放置left到预留位置

将right放置到预留位置：

#right {width: 150px; margin-left: -150px;
}

得到最终效果：

双飞翼布局最终效果

最后计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖，如下所示：

中间栏内容被覆盖

因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用（假设为150px），则有：

body {min-width: 500px;
}

至此双飞翼布局大功告成！其布局整体代码为：

body {min-width: 500px;
}#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px; margin-left: -100%;
}#right {width: 150px; margin-left: -150px;
}#footer {clear: both;
}

关于双飞翼布局的示例，可参考：双飞翼布局

总结与思考

通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。

使用flex

这里使用flex还是需要与圣杯布局相同的DOM结构，不过在实现上将更加简单：

<!-- DOM结构 -->
<div id="container"><div id="center"></div><div id="left"></div><div id="right"></div>
</div>

CSS代码如下：


#container {display: flex;
}#center {flex: 1;
}#left {flex: 0 0 200px;order: -1;
}#right {flex: 0 0 150px;
}

本文引用了[https://www.jianshu.com/p/81ef7e7094e8]内容，感谢原作者付出。