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

在前端开发中，要实现一个布局：三列布局——左右列宽度固定，中间列内容优先渲染且中间列宽度自适应一般有两种实现方式，圣杯布局（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元素来实现侧边栏的定位，以及使用负外边距将主内容区域撑开。

posted @ 2025-03-29 22:05 消逝的风i 阅读(400) 评论(0) 收藏举报

刷新页面返回顶部

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

圣杯布局（Holy Grail Layout）：

双飞翼布局（Double Wing Layout）：

公告