您现在的位置是：亿华云 > 系统运维

圣杯布局和双飞翼布局，你更喜欢那个布局？

亿华云2025-10-08 20:54:36【系统运维】8人已围观

简介作用首先要解释一下：无论是圣杯布局还是双飞翼布局，都是为了实现一个效果：左右固定宽度，中间部分自适应。两者的区别在于，圣杯布局给中间的 div 设置 padding-left 和

作用

首先要解释一下：无论是圣杯圣杯布局还是双飞翼布局，都是布局布局为了实现一个效果：左右固定宽度，中间部分自适应。和双欢那两者的飞翼区别在于，圣杯布局给中间的更喜个布 div 设置 padding-left 和 padding-right;而双飞翼布局则在中间的 div 内部创建子 div 放置内容，并在该 div 里用 margin-left 和 margin-right 留出左右宽度。圣杯

圣杯布局

HTML 结构如此：

组成头部

中间部分自适应左边栏固定宽度右边栏不顾宽度 </body>

CSS 样式如此：

body {

min-width: 700px;

}

header,布局布局

footer {

background: grey;

border: 1px solid #333;

text-align: center;

}

.left,

.middle,

.right {

position: relative;

float: left;

min-height: 130px;

}

.container {

padding: 0 220px 0 200px;

overflow: hidden;

}

.middle {

width: 100%;

background: red;

}

.left {

margin-left: -100%;

left: -200px;

width: 200px;

background: green;

}

.right {

margin-left: -220px;

right: -220px;

width: 220px;

background: blue

}

footer {

clear: both;

}

效果如此：

圣杯布局

代码说明：

首先在容器 container 中给予 padding：0 220px 0 200px ，这一步是和双欢那为了给两边固定宽预留位置。中间(middle)元素设置 width: 100%，飞翼它自然就自适应了。更喜个布设置左边(left)元素 position: relative,圣杯 left: -200px。这样做是布局布局让它做到左边的固定位置，做到此时，和双欢那效果如下。飞翼圣杯布局接着用margin-left: -100%，更喜个布让其回到与中间部分一样高的位置，这就是圣杯布局的关键margin-left：-100% 。表示向左移动整个屏幕的距离因为三个元素都加了浮动，所以配合 margin-left: -100% 左边容器就能与中间部分同高。免费信息发布网同理，设置右边(right)元素position: relative, right:-220px, margin-left: -220px 注意，这里的 margin-left 是 220px。为什么这个是220px，和它自身宽度一致注意，自身 margin-left 为负时，就往左移动，等它等于自身高度时就“升格”到上一层，当它等于 -100% 时，这个 100% 表示的是中间部分的宽度，所以就固定在左边了。双飞翼布局

有人说“双飞翼布局是玉伯大大提出来的，始于淘宝UED”，其效果和圣杯布局一样，只是它把三栏布局比作一只鸟，中间内容部分分为三部分，左翅膀、中间、右翅膀。其技术关键在于它还有一层 div。

HTML 结构如此：

组成头部

中间部分自适左边栏固定宽度右边栏固定宽度 </body>

CSS 结构如此：

body {

min-width: 700px;

}

header,

footer {

background: grey;

border: 1px solid #333;