|
在前端开发中，要实现一个布局：三列布局——左右列宽度固定，中间列内容优先渲染且中间列宽度自适应一般有两种实现方式，圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wing Layout）。两者都是用来实现三列布局左右列固定宽度、中间列自适应并且中间列在文档流中优先渲染。以下是两种布局的详细介绍和代码示例：
圣杯布局（Holy Grail Layout）：
先说一下HTML书写思路：
1、首先定义一个父级div，包裹三列内容。
2、将中间列放到第一个（做这步骤主要目的是为了使中间列在文档流中优先渲染，因为HTML中DOM渲染是自上而下）。
HTML代码如下：
<div class="wrapper">
<!-- 中间列在文档流中优先渲染，所以要将中间列放第一个 -->
<div class="center column">center</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
接着看一下CSS书写思路：
1、给父级div设置padding-left及padding-right，padding-left的大小必须等于左侧列的宽度，padding-right的大小必须等于右侧列的宽度。
.wrapper{
/* padding: 上 右 下 左 */
padding: 0 150px 0 200px;
}
2、给每列设置float:left使元素脱离文档流并向左浮动，其周围的元素也会重新排列；并且给每列设置一个固定的高度。
.column{
float: left;
height: 200px;
}
3、中间列：为中间列设置宽度为100%。
.center{
/* 设置背景色是为了效果更明显 */
background-color: red;
width: 100%;
}
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。
.left{
/* 设置背景色是为了效果更明显 */
background-color: blue;
width: 200px;
position: relative;
margin-left: -100%;
right: 200px;
}
5、右侧列：
5.1、先给右侧列固定宽度width: 150px;。
5.2、设置右侧列右边距为-150px，margin-right: -150px;这样可以使得右侧列从当前行移动到当前行上一行，且位于中间列右侧。
.right{
/* 设置背景色是为了效果更明显 */
background-color: green;
width: 150px;
margin-right: -150px;
}
6、清除浮动。
.wrapper:after{
display: table;
content: '';
clear: both;
}
CSS代码如下：
<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>
代码如下：
<!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>
圣杯布局实现三列布局左右列固定宽度、中间列自适应，其原理是通过相对定位和负边距来实现侧边栏的定位。
双飞翼布局（Double Wing Layout）：
代码如下：
<!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>
双飞翼布局实现三列布局左右列固定宽度、中间列自适应，其原理是通过使用嵌套的div元素来实现侧边栏的定位，以及使用负外边距将主内容区域撑开。
来源：https://www.cnblogs.com/abc-x/p/18800018 |
发表于 2025-3-29 22:05:00