当前位置： 首页 > news >正文

【CSS/HTML】圣杯布局和双飞翼布局实现两侧宽度固定，中间宽度自适应及其他扩展实现

news 2026/4/1 0:57:01

前沿简介

圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局来源于文章In Search of the Holy Grail,双飞翼布局来源于淘宝UED。

两者的实现方式有差异，但是都遵循以下几点：

  • 两侧宽度固定，中间宽度自适应
  • 中间部分在DOM结构上优先，以便先行渲染
  • 允许三列中的任意一列称为最高列
  • 只需要使用一个额外的<div>标签

圣杯布局

DOM结构

<div id="header"></div>
<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div>
</div>
<div id="footer"></div>

主体由container包裹center、left、right三部分，其中的center在最前面，优先渲染。

CSS代码

假设左侧固定宽度200px,右侧固定宽度150px，在container上设置如下样式:

#container {padding-left: 200px;padding-right: 150px;
}

目的就是给左侧以及右侧预留出空间，得到如下示意图：
image

随后为左中右三列设置浮动与对应的宽度，同时为底部footer设置清除浮动。

#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px; 
}#right {width: 150px; 
}#footer {clear: both;
}

得到如下示意图效果：
image

由于center设置了宽度100%，所有左侧left跟右侧right被挤到了第二行。

如果要把left放到预留的位置，那么需要使用负外边距,代码如下：

#left {width: 200px; margin-left: -100%;
}

得到如下示意图效果：
image

由于margin-right: -100%占据叠到了center列左侧，那么需要用定位并且设置right的值为left列的宽度才能放到左侧预留的位置，代码如下：

#left {width: 200px;margin-left: -100%;position:relative;right: 200px;
}

这样后得到的示意图效果：
image

接下来对right列进行设置，代码如下：

#right {width: 150px;margin-right: -150px;
}

最终的示意图效果：
image

到这儿页面的基本样式完成。但是我们需要考虑页面的最小宽度，由于两侧有个固定宽度，感觉最小宽度就是200+150=350px,但是由于left列使用了定位position:relative,所以center列至少有个left设置的right值的宽度，即200px,所以最终的最小宽度是：200+150+200=550px。

body {min-width: 550px;
}

那么圣杯布局的整体CSS代码如下：

body {min-width: 550px;
}#container {padding-left: 200px; padding-right: 150px;
}#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px; margin-left: -100%;position: relative;right: 200px;
}#right {width: 150px; margin-right: -150px; 
}#footer {clear: both;
}

为了看到效果，贴一个完整示例代码，有模块的背景色：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
html,body {margin: 0;padding: 0;height: 100%;
}
body {min-width: 550px;
}
#header,#footer {background: #4d4d50; height: 40px;
}
#container {padding-left: 200px;padding-right: 150px;height: calc(100% - 80px); 
}
#container .column {float: left;
}
#center{width: 100%;height: 100%; background: #c3c3cd; 
}
#left {width: 200px;position:relative;margin-left: -100%;right: 200px;background: #2e2eec; 
}
#right {width: 150px;margin-right: -150px;background: #0adf23; 
}
#footer{clear:both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container"><div id="center" class="column">中间内容</div><div id="left" class="column">左侧内容</div><div id="right" class="column">右侧内容</div>
</div>
<div id="footer"></div>
</body>
</html>

双飞翼布局

DOM结构

<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

CSS代码

跟前面思路一样，设置各列宽度与浮动，为左右两列预留出空间，以及底部footer清除浮动，代码如下：

#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px; 
}#right {width: 150px; 
}#footer {clear: both;
}

将left放到预留位置左侧：

#left {width: 200px; margin-left: -100%;
}

将right放到预留位置右侧：

#right {width: 150px; margin-left: -150px;
}

最终计算页面的最小宽度：200+150=350px;虽然左侧没有用到定位，但是如果页面的宽度小于350px,那么会挤占中间center的宽度，故设置页面最小宽度为500px,代码如下：

body {min-width: 500px;
}

双飞翼布局的完整CSS代码：

body {min-width: 500px;
}#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px; margin-left: -100%;
}#right {width: 150px; margin-left: -150px;
}#footer {clear: both;
}

为了看到效果，也贴一个完整示例代码，有模块的背景色：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>双飞翼布局</title>
</head>
<style>html,body {margin: 0;padding: 0;height: 100%;}body {min-width: 500px;}#header,#footer {background: #4d4d50;height: 40px;}#container {width: 100%;}#center {margin-left: 200px;margin-right: 150px;background: #c3c3cd;}.column {float: left;}#left{width: 200px;margin-left: -100%;background: #2e2eec;}#right {width: 150px;margin-left: -150px;background: #0adf23;}#footer {clear: both;}
</style>
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center">中间内容</div>
</div>
<div id="left" class="column">左侧内容</div>
<div id="right" class="column">右侧内容</div>
<div id="footer"></div>
</body>
</html>

扩展实现

如果去掉额外添加的<div>标签,也能实现相同的布局。

DOM结构变化为如下：

<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

基于双飞翼布局的实现思路，只需要在center上做出修改。

1.使用calc()

.column {float: left;
}
#center {margin-left: 200px;margin-right: 150px;width: calc(100% - 350px);
}
#left{width: 200px;margin-left: -100%;
}
#right {width: 150px;margin-left: -150px;
}
#footer {clear: both;
}

2.使用border-box

.column {float: left;
}#center {padding-left: 200px;padding-right: 150px;box-sizing: border-box;width: 100%;
}

需要注意的是：由于padding是盒子的一部分，所以padding部分会具有中间栏的背景色，当中间栏高于侧栏时，会出现中间背景色出现在侧栏下面中。

3.使用flex

DOM结构如下：

<!-- DOM结构 -->
<div id="container"><div id="center"></div><div id="left"></div><div id="right"></div>
</div>

CSS代码：

#container {display: flex;
}
#center {flex: 1;
}
#left {flex: 0 0 200px;order: -1;
}
#right {flex: 0 0 150px;
}

参考地址：

  • 《圣杯布局和双飞翼布局的理解与思考》
  • 《CSS布局奇淫巧计之-强大的负边距》

相关文章：

【CSS/HTML】圣杯布局和双飞翼布局实现两侧宽度固定，中间宽度自适应及其他扩展实现

前沿简介 圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同&#xff0c;都是为了实现一个两侧宽度固定&#xff0c;中间宽度自适应的三栏布局。 圣杯布局来源于文章In Search of the Holy Grail,双飞翼布局来源于淘宝UED。 两者的实现方式有差异&#xff0c;但是都…...

编程日记 2024/10/3 17:07:14

数据流和数据流处理技术

一数据流 首先明确数据流概念&#xff1a;数据流是连续不断生成的、快速变化的无界数据序列 数据流类型&#xff1a; 数据流大致可以分为四种类型 1.连续型数据流&#xff1a;不断地产生数据&#xff0c;数据稳定速度输入系统。 2.突发型数据流&#xff1a;在某特定时间或…...

编程日记 2024/10/3 17:05:12

（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

系列文章目录 文章目录 系列文章目录一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案1.资料 一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案 1.资料…...

编程日记 2024/10/3 17:04:11

解决TikTok无网络连接问题解析

随着社交媒体的快速发展&#xff0c;TikTok已成为全球用户最喜欢的短视频平台之一&#xff0c;吸引了数以亿计的用户。然而&#xff0c;在享受这个平台时&#xff0c;用户经常会遇到无网络连接的问题&#xff0c;这不仅影响观看体验&#xff0c;还可能导致无法上传内容或参与社…...

编程日记 2024/10/3 17:02:09

k8s中，ingress的实现原理，及其架构。

图片来源&#xff1a;自己画的 图片来源&#xff1a;k8s官网 首先&#xff0c;什么是ingress? 是服务还是控制器&#xff1f; 都不精确 ingress是一个api资源 service和deployment也是api资源。 这几个相互协作&#xff0c;组建成一个对外提供服务的架构。 ingress提供的…...

编程日记 2024/10/3 17:00:07

【数据结构强化】应用题打卡

应用题打卡 数组的应用 对称矩阵的压缩存储 注意&#xff1a; 1. 2.上三角的行优先存储及下三角的列优先存储与数组的下表对应 上/下三角矩阵的压缩存储 注意&#xff1a; 上/下三角压缩存储是将0元素统一压缩存储&#xff0c;而不是将对角线元素统一压缩存储 三对角矩阵的…...

编程日记 2024/10/3 16:59:06

解决 MySQL 服务无法启动：failed to restart mysql.service: unit not found

目录 前言1. 问题描述2. 问题分析3. 解决步骤3.1 检查 MySQL 服务文件3.2 备份旧的服务文件3.3 启动 MySQL 服务3.4 验证服务状态 4. 总结结语 前言 在日常使用 MySQL 数据库时&#xff0c;有时候可能会遇到服务无法正常启动的问题。这类问题通常出现在系统更新或者服务配置文…...

编程日记 2024/10/3 16:51:59

Dubbo和Http的调用有什么区别

背景 我们在项目开发中&#xff0c;需要进行调用外部接口时&#xff0c;往往使用Dubbo和Http方式都能实现远程调用。那么他们在使用上&#xff0c;有什么区别呢&#xff1f; 定位不同 一个是分布式环境下的框架&#xff0c;一个是通信协议。 Dubbo&#xff1a;是一种高性能的…...

编程日记 2024/10/3 16:50:58

ARM 架构、cpu

一、ARM的架构 ARM是一种基于精简指令集&#xff08;RISC&#xff09;的处理器架构. 1、ARM芯片特点 ARM芯片的主要特点有以下几点&#xff1a; 精简指令集&#xff1a;ARM芯片使用精简指令集&#xff0c;即每条指令只完成一项简单的操作&#xff0c;从而提高指令的执行效率…...

编程日记 2024/10/3 16:48:56

【React】入门Day03 —— Redux 与 React Router 核心概念及应用实例详解

1. Redux 介绍 // 创建一个简单的Redux store const { createStore } Redux;// reducer函数 function counterReducer(state { count: 0 }, action) {switch (action.type) {case INCREMENT:return { count: state.count 1 };case DECREMENT:return { count: state.count -…...

编程日记 2024/10/3 16:47:55

u2net网络模型训练自己数据集

单分类 下载项目源码 项目源码 准备数据集 将json转为mask json_to_dataset.py import cv2 import json import numpy as np import os import sys import globdef func(file):with open(file, moder, encoding"utf-8") as f:configs json.load(f)shapes configs…...

编程日记 2024/10/3 16:46:54

登录功能开发 P167重点

会话技术&#xff1a; cookie jwt令牌会话技术&#xff1a; jwt生成&#xff1a; Claims&#xff1a;jwt中的第二部分 过滤器&#xff1a; 拦截器&#xff1a; 前端无法识别controller方法&#xff0c;因此存在Dispa什么的...

编程日记 2024/10/3 16:45:53

数据架构图：从数据源到数据消费的全面展示

在这篇文章中&#xff0c;我们将探讨如何通过架构图来展示数据的整个生命周期&#xff0c;从数据源到数据消费。下面是一个使用Mermaid格式的示例数据架构图&#xff0c;展示了数据从源到消费的流动、处理和存储过程。 数据架构图示例 说明 数据源&#xff1a;分为内部数据源&…...

编程日记 2024/10/3 16:42:49

useEffect 与 useLayoutEffect 的区别

useEffect 与 useLayoutEffect 的区别 useEffect和useLayoutEffect是处理副作用的React钩子函数&#xff0c;有以下区别1. 执行时机不同2. 对性能影响不同3. 对渲染的影响不同&#xff1a;4. 使用场景不同 使用建议 useEffect和useLayoutEffect是处理副作用的React钩子函数&…...

编程日记 2024/10/3 16:39:45

OPENCV判断图像中目标物位置及多目标物聚类

文章目录 在最近的项目中&#xff0c;又碰到一个有意思的问题需要通过图像算法来解决。就是显微拍摄的到的医疗图像中&#xff0c;有时候目标物比较偏&#xff0c;也就是在图像的比较偏的位置&#xff0c;需要通过移动样本&#xff0c;将目标物置于视野正中央&#xff0c;然后再…...

编程日记 2024/10/3 16:38:44

分布式理论：拜占庭将军问题

分布式理论&#xff1a;拜占庭将军问题 介绍拜占庭将军的故事将军的难题 解决方案口信消息型拜占庭问题之解流程总结 签名消息型拜占庭问题之解 总结 介绍 拜占庭将军问题是对分布式共识问题的一种情景化描述&#xff0c;由兰伯特于1082首次发表《The Byzantine Generals Prob…...

编程日记 2024/10/3 16:35:42

从零开始Ubuntu24.04上Docker构建自动化部署（三）Docker安装Nginx

安装nginx sudo docker pull nginx 启动nginx 宿主机创建目录 sudo mkdir -p /home/nginx/{conf,conf.d,html,logs} 先启动nginx sudo docker run -d --name mynginx -p 80:80 nginx 宿主机上拷贝docker上nginx服务上文件到本地目录 sudo docker cp mynginx:/etc/nginx/ngin…...

编程日记 2024/10/3 16:32:38

阿里云 SAE Web：百毫秒高弹性的实时事件中心的架构和挑战

作者&#xff1a;胡志广(独鳌) 背景 Serverless 应用引擎 SAE 事件中心主要面向早期的 SAE 控制台只有针对于应用维度的事件&#xff0c;这个事件是 K8s 原生的事件&#xff0c;其实绝大多数的用户并不会关心&#xff0c;同时也可能看不懂。而事件中心&#xff0c;是希望能够…...

编程日记 2024/10/3 16:30:36

人口普查管理系统基于VUE+SpringBoot+Spring+SpringMVC+MyBatis开发设计与实现

目录 1. 系统概述 2. 系统架构设计 3. 技术实现细节 3.1 前端实现 3.2 后端实现 3.3 数据库设计 4. 安全性设计 5. 效果展示 ​编辑​编辑 6. 测试与部署 7. 示例代码 8. 结论与展望 一个基于 Vue Spring Boot Spring Spring MVC MyBatis 的人口普查管理…...

编程日记 2024/10/3 16:29:36

使用VBA快速将文本转换为Word表格

Word提供了一个强大的文本转表格的功能&#xff0c;结合VBA可以实现文本快速转换表格。 示例文档如下所示。 现在需要将上述文档内容转换为如下格式的表格&#xff0c;表格内容的起始标志为。 示例代码如下。 Sub SearchTab()Application.DefaultTableSeparator "*&quo…...

编程日记 2024/10/3 16:28:35

Hadoop 3.3.5 分布式集群部署

环境准备与规划硬件要求&#xff1a;3台节点&#xff08;1主2从&#xff09;软件依赖&#xff1a;JDK 8、SSH免密登录目录规范&#xff1a;统一安装路径&#xff08;如/opt/module&#xff09;&#xff0c;用户权限管理Hadoop安装与核心配置一定要检查一下&#xff0c;ssh 能不…...

编程新知 2026/3/31 23:55:28

Origin绘图进阶：如何在现有图形上叠加散点图与等高线（附MATLAB对比）

Origin数据可视化进阶&#xff1a;多层图表叠加与等高线绘制实战 科研图表的美观性与信息密度往往决定了研究成果的呈现效果。作为一款专业的数据分析与可视化工具&#xff0c;Origin在复杂图表叠加方面展现出独特优势&#xff0c;尤其适合需要同时展示散点分布与等高线趋势的科…...

编程新知 2026/3/31 23:49:20

LoRa Feather固件设计：ESP32-S3多外设协同与低功耗调度

1. 项目概述“LoRa Feather”并非一个官方发布的标准化嵌入式库&#xff0c;而是由开发者基于 Adafruit LoRa FeatherWing&#xff08;如 RFM95W/RFM96W 模块&#xff09;与 ESP32-S3&#xff08;特别是带 TFT 显示屏的 Adafruit Feather ESP32-S3 Reverse&#xff09;硬件平台…...

编程新知 2026/3/31 22:26:12

YimMenu完全指南：GTA5免费辅助工具从入门到精通

YimMenu完全指南&#xff1a;GTA5免费辅助工具从入门到精通 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...

编程新知 2026/3/31 21:18:57

新手入门：用快马生成第一个交易平台风格的前端页面

今天想和大家分享一个特别适合前端新手的练手项目——用InsCode(快马)平台快速搭建一个简易的交易平台前端页面。作为一个刚接触金融科技开发的小白&#xff0c;我发现这种模拟真实业务场景的项目特别能激发学习兴趣。 项目目标拆解 这个模拟交易账户页面需要实现几个核心功能模…...

编程新知 2026/3/31 20:56:33

3步实现Web界面设计标注高效交付：面向全栈团队的Sketch Measure应用指南

3步实现Web界面设计标注高效交付&#xff1a;面向全栈团队的Sketch Measure应用指南 【免费下载链接】sketch-measure Make it a fun to create spec for developers and teammates 项目地址: https://gitcode.com/gh_mirrors/sk/sketch-measure 在Web开发项目中&#x…...

编程新知 2026/3/31 19:49:29

新手入门DetectionLab：10个步骤掌握企业网络安全检测基础

新手入门DetectionLab&#xff1a;10个步骤掌握企业网络安全检测基础 【免费下载链接】DetectionLab clong/DetectionLab: DetectionLab是一个开源项目&#xff0c;旨在建立一个高度可配置的虚拟环境以模拟企业网络&#xff0c;用于检测恶意活动、演练入侵检测系统&#xff08;…...

编程新知 2026/3/31 17:45:32

从10分钟/件到30秒/件！我用YOLOv8自动识别电商SKU，效率提升10倍

上周三凌晨2点&#xff0c;我盯着电脑屏幕发呆&#xff1a;又到了电商商品上架的时间。人工识别SKU需要10分钟/件&#xff0c;系统错误率高达15%&#xff0c;仓库主管拍桌子说"这AI比老式Excel还慢"。我试过12种方案&#xff0c;结果全是"识别失败"、“精度…...

编程新知 2026/3/31 16:52:29

5分钟掌握Vue工作流设计器：workflow-bpmn-modeler终极指南

5分钟掌握Vue工作流设计器&#xff1a;workflow-bpmn-modeler终极指南 【免费下载链接】workflow-bpmn-modeler &#x1f525; flowable workflow designer based on vue and bpmn.io7.0 项目地址: https://gitcode.com/gh_mirrors/wo/workflow-bpmn-modeler 还在为复杂…...

编程新知 2026/3/31 16:26:14

探索MediaPipe：从零开始构建实时计算机视觉应用的完整指南

探索MediaPipe&#xff1a;从零开始构建实时计算机视觉应用的完整指南 【免费下载链接】mediapipe Cross-platform, customizable ML solutions for live and streaming media. 项目地址: https://gitcode.com/GitHub_Trending/med/mediapipe MediaPipe是Google开源的一…...

编程新知 2026/3/31 16:24:09