圣杯布局和双飞翼布局都是前端开发中常用的页面布局方式，目标都是实现一个三栏布局，其中左右两栏固定宽度，中间栏自适应宽度，并且优先加载中间内容。它们的核心思想都是利用 float 和负边距来实现，但实现方式略有不同。
圣杯布局 (Holy Grail Layout):
-
原理: 中间栏放最前面，左右两栏分别浮动到两侧。利用相对定位和负边距，将左右两栏移动到中间栏的左右两侧，并覆盖中间栏一部分区域。为了防止内容被覆盖，中间栏设置左右
padding值，大小与左右两栏宽度一致。 -
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
body {
min-width: 550px; /* 防止左右栏重叠 */
}
.container {
padding-left: 200px; /* 左栏宽度 */
padding-right: 150px; /* 右栏宽度 */
}
.center, .left, .right {
position: relative;
float: left;
min-height: 100px;
}
.center {
width: 100%;
background-color: lightgreen;
}
.left {
width: 200px;
right: 200px; /* 左栏宽度 */
margin-left: -100%;
background-color: lightcoral;
}
.right {
width: 150px;
margin-right: -150px; /* 右栏宽度 */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="center">Center</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
双飞翼布局 (Double Wing Layout):
-
原理: 与圣杯布局类似，但左右两栏不使用相对定位，而是直接放在中间栏内部，利用
margin负值使其移动到两侧。中间栏使用一个内部div来包裹内容，并设置左右margin值，大小与左右两栏宽度一致，防止内容被覆盖。 -
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
body {
min-width: 550px; /* 防止左右栏重叠 */
}
.container {
float: left;
width: 100%;
}
.center {
margin-left: 200px; /* 左栏宽度 */
margin-right: 150px; /* 右栏宽度 */
}
.center .inner {
margin-left: -200px; /* 左栏宽度 */
margin-right: -150px; /* 右栏宽度 */
background-color: lightgreen;
min-height: 100px;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
background-color: lightcoral;
min-height: 100px;
}
.right {
float: right;
width: 150px;
margin-right: -150px; /* 右栏宽度 */
background-color: lightblue;
min-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">
<div class="inner">Center</