前端常见布局之圣杯布局及双飞翼布局

要做一棵树 發表於 2025-3-29 22:05:00

前端常见布局之圣杯布局及双飞翼布局

在前端开发中，要实现一个布局：三列布局——左右列宽度固定，中间列内容优先渲染且中间列宽度自适应一般有两种实现方式，圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wing Layout）。两者都是用来实现三列布局左右列固定宽度、中间列自适应并且中间列在文档流中优先渲染。以下是两种布局的详细介绍和代码示例：
<h3>圣杯布局（Holy Grail Layout）：</h3>
先说一下HTML书写思路：
1、首先定义一个父级div，包裹三列内容。
2、将中间列放到第一个（做这步骤主要目的是为了使中间列在文档流中优先渲染，因为HTML中DOM渲染是自上而下）。
HTML代码如下：
<div class="cnblogs_code">
<pre><div class="wrapper">

<div class="center column">center</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div></pre>
</div>
 接着看一下CSS书写思路：
1、给父级div设置padding-left及padding-right，padding-left的大小必须等于左侧列的宽度，padding-right的大小必须等于右侧列的宽度。
<div class="cnblogs_code">
<pre>.wrapper{
/* padding: 上右下左 */
padding: 0 150px 0 200px;
}</pre>
</div>
2、给每列设置float:left使元素脱离文档流并向左浮动，其周围的元素也会重新排列；并且给每列设置一个固定的高度。
<div class="cnblogs_code">
<pre>.column{
float: left;
height: 200px;
}</pre>
</div>
3、中间列：为中间列设置宽度为100%。
<div class="cnblogs_code">
<pre>.center{
/* 设置背景色是为了效果更明显 */
background-color: red;
width: 100%;
}</pre>
</div>
4、左侧列：
4.1、先给左侧列固定宽度width: 200px;。
4.2、然后设置左侧列相对定位position：relative，设置相对定位的目的是为了使左侧列相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。
4.3、设置左侧列左边距为-100%，margin-left: -100%;这样可以使得左侧列从当前行移动到当前行上一行，重合于中间列且位于中间列最左边。
4.4、由于步骤4.2使用了相对定位，使用了相对定位的元素可以相对于原来位置移动（通过设置top、bottom、lef、right的值），所以设置right: 200px;将元素向左移动200px。
<div class="cnblogs_code">
<pre>.left{
/* 设置背景色是为了效果更明显 */
background-color: blue;
width: 200px;
position: relative;
margin-left: -100%;
right: 200px;
}</pre>
</div>
5、右侧列：
5.1、先给右侧列固定宽度width: 150px;。
5.2、设置右侧列右边距为-150px，margin-right: -150px;这样可以使得右侧列从当前行移动到当前行上一行，且位于中间列右侧。
<div class="cnblogs_code">
<pre>.right{
/* 设置背景色是为了效果更明显 */
background-color: green;
width: 150px;
margin-right: -150px;
}</pre>
</div>
6、清除浮动。
<div class="cnblogs_code">
<pre>.wrapper:after{
display: table;
content: '';
clear: both;
}</pre>
</div>
CSS代码如下：
<div class="cnblogs_code">
<pre><style type="text/css">
.wrapper{
 /* padding: 上右下左 */
 padding: 0 150px 0 200px;
}
.column{
 float: left;
 height: 200px;
}
.center{
 /* 设置背景色是为了效果更明显 */
 background-color: red;
 width: 100%;
}
.left{
 /* 设置背景色是为了效果更明显 */
 background-color: blue;
 width: 200px;
 position: relative;
 margin-left: -100%;
 right: 200px;
}
.right{
 /* 设置背景色是为了效果更明显 */
 background-color: green;
 width: 150px;
 margin-right: -150px;
} .wrapper:after{ display: table; content: ''; clear: both; } </style></pre>
</div>
代码如下：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
 .wrapper{
 /* padding: 上右下左 */
 padding: 0 150px 0 200px;
 }
 .column{
 float: left;
 height: 200px;
 }
 .center{
 /* 设置背景色是为了效果更明显 */
 background-color: red;
 width: 100%;
 }
 .left{
 /* 设置背景色是为了效果更明显 */
 background-color: blue;
 width: 200px;
 position: relative;
 margin-left: -100%;
 right: 200px;
 }
 .right{
 /* 设置背景色是为了效果更明显 */
 background-color: green;
 width: 150px;
 margin-right: -150px;
 }
 .wrapper:after{
 display: table;
 content: '';
 clear: both;
 }
</style>
</head>
<body>
<div class="wrapper">
 
 <div class="center column">center</div>
 <div class="left column">left</div>
 <div class="right column">right</div>
</div>
</body>
</html></pre>
</div>
圣杯布局实现三列布局左右列固定宽度、中间列自适应，其原理是通过相对定位和负边距来实现侧边栏的定位。
<h3>双飞翼布局（Double Wing Layout）：</h3>
代码如下：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
 .wrapper{
 background-color: red;
 width: 100%;
 }
 .column{
 float: left;
 height: 200px;
 }
 .center{
 /* margin简写[上右下左] */
 margin: 0 150px 0 200px;
 }
 .left{
 width: 200px;
 background-color: blue;
 margin-left: -100%;
 }
 .right{
 width: 150px;
 background-color: green;
 margin-left: -150px;
 }
</style>
</head>
<body>

<div class="wrapper column">
 <div class="center">center</div>
</div>

<div class="left column">left</div>

<div class="right column">right</div>
</body>
</html></pre>
</div>
双飞翼布局实现三列布局左右列固定宽度、中间列自适应，其原理是通过使用嵌套的<code class="inlineCode___uUrJ9">div元素</code>来实现侧边栏的定位，以及使用负外边距将主内容区域撑开。 
来源：https://www.cnblogs.com/abc-x/p/18800018

頁: [1]

琼殿技术论坛's Archiver

前端常见布局之圣杯布局及双飞翼布局