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

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

news 文章来源：https://blog.csdn.net/mengran_code/article/details/142579351 2024/12/26 9:09:07

前沿简介

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

圣杯布局来源于文章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;
}

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

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

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

得到如下示意图效果：

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

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

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

得到如下示意图效果：

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

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

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

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

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

最终的示意图效果：

到这儿页面的基本样式完成。但是我们需要考虑页面的最小宽度，由于两侧有个固定宽度，感觉最小宽度就是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】圣杯布局和双飞翼布局实现两侧宽度固定，中间宽度自适应及其他扩展实现

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

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

数据流和数据流处理技术

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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 数据库时，有时候可能会遇到服务无法正常启动的问题。这类问题通常出现在系统更新或者服务配置文…...

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

Dubbo和Http的调用有什么区别

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

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

ARM 架构、cpu

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

编程日记 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重点

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

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

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

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

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

useEffect 与 useLayoutEffect 的区别

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

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

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

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

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

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

分布式理论：拜占庭将军问题介绍拜占庭将军的故事将军的难题解决方案口信消息型拜占庭问题之解流程总结签名消息型拜占庭问题之解总结介绍拜占庭将军问题是对分布式共识问题的一种情景化描述，由兰伯特于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：百毫秒高弹性的实时事件中心的架构和挑战

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

编程日记 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提供了一个强大的文本转表格的功能，结合VBA可以实现文本快速转换表格。示例文档如下所示。现在需要将上述文档内容转换为如下格式的表格，表格内容的起始标志为。示例代码如下。 Sub SearchTab()Application.DefaultTableSeparator "*&quo…...

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

力扣题解1870

这道题是一个典型的算法题，涉及计算在限制的时间内列车速度的最小值。这是一个优化问题，通常需要使用二分查找来求解。题目描述（中等） 准时到达的列车最小时速给你一个浮点数 hour ，表示你到达办公室可用的总通勤时…...

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

D3.js数据可视化基础——基于Notepad++、IDEA前端开发

实验：D3.js数据可视化基础 1、实验名称 D3数据可视化基础 2、实验目的熟悉D3数据可视化的使用方法。 3、实验原理 D3 的全称是（Data-Driven Documents），是一个被数据驱动的文档，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。本次实…...

编程日记 2024/10/3 16:20:27

在Robot Framework中Run Keyword If的用法

基本用法使用 ELSE使用 ELSE IF使用内置变量使用Python表达式本文永久更新地址: 在Robot Framework中，Run Keyword If 是一个条件执行的关键字，它允许根据某个条件来决定是否执行某个关键字。下面是 Run Keyword If 的基本用法： Run Keyword…...

编程日记 2024/10/3 16:18:25

虚拟机ip突然看不了了

打印大致如下： 解决办法如果您发现虚拟机的IP地址与主机不在同一网段，可以采取的措施之一是调整网络设置。将虚拟机的网络模式更改为桥接模式，这样它就会获得与主机相同的IP地址，从而处于同一网段。或者，您可以使用…...

编程日记 2024/10/3 16:16:24

LeetCode[中等] 763. 划分字母区间

给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段，同一字母最多出现在一个片段中。注意，划分结果需要满足：将所有划分结果按顺序连接，得到的字符串仍然是 s 。返回一个表示每个字符串片段的长度的列表。思路贪心…...

编程日记 2024/10/3 16:11:19

Java LeetCode每日一题

997. 找到小镇的法官 package JavaExercise20241002;public class JavaExercise {public static void main(String[] args) {int[][] array {{1,3},{2,3},{3,1}};Solution solution new Solution();System.out.println(solution.findJudge(3, array));} }class Solution {pu…...

编程日记 2024/10/3 16:10:18

数据结构--集合框架

目录 1. 什么是集合框架 2. 背后所涉及的数据结构以及算法 2.1 什么是数据结构 2.2 容器背后对应的数据结构 1. 什么是集合框架 Java 集合框架 Java Collection Framework ，又被称为容器 container ，是定义在 java.util 包下的一组接口 int…...

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

Win10鼠标总是频繁自动失去焦点-非常有效-重启之后立竿见影

针对Win10鼠标频繁自动失去焦点的问题，可以尝试以下解决方案： 一、修改注册表（最有效的方法-重启之后立竿见影） 打开注册表编辑器： 按下WindowsR组合键，打开运行窗口。在运行窗口中输入“regedit”&#x…...

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

智能涌现｜迎接智能时代，算力产业重构未来

前言 OpenAI首席执行官山姆奥特曼在《智能时代》中描绘了一个令人振奋的未来图景，其中算力产业将扮演至关重要的角色。奥特曼预测，我们可能在“几千天内”迎来超级智能，这一进程将极大加速社会结构的智能化转型。这一预测与算力产业的未来…...

编程日记 2024/10/3 16:05:11

关于HTML 案例_个人简历展示01

案例效果展示代码 <!DOCTYPE html> <lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>个人简历信息</title> </he…...

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

企业网站制作建设/全媒体运营师培训费用

...

编程日记 2024/12/26 4:44:56

做彩票的网站吗/百度平台订单查询

经现场同事反映，他们用的好好的XML 导出工具最近一直报错，经常报数据库连接超时，查看数据库发现已经有100G 以上有空间了。但导出数据的存储过程里面每次按时间只导1000多条数据，近理说有时间过滤应该不会产生问题。将存储过程拉…...

编程日记 2024/12/26 1:50:08

购物网站建设费用/外包平台

非对称复合表集合（Asymmetrical Composite Table Collections），是本人学习编程以来，遇到的最复杂的数据结构之一。暂且不管其实用性如何，从理论学习的角度而言，了解一下也不错。以下示例和电影《指环王…...

编程日记 2024/12/25 16:35:05

如何破解wordpress主题/互联网销售是什么意思

Arduino内置EEPROM数据存取驱动仿真 EEPROM（电可擦除可编程只读存储器）是用户可修改的只读存储器（ROM），可以通过施加高于正常电压的电压反复擦除和重新编程（写入）。与 EPROM 芯片不同，EEPROM 不需要从计算机中取出即可进行修改。但是，EEPROM 芯片必须整体擦除和重新…...

编程日记 2024/12/25 15:50:23

搜狗网站排名怎么做/小程序开发需要哪些技术

我第一次遇到这个错误是出现在我需要连表查询一条随机数据，照猫画虎 Controller文件是这样写的： Mapper文件是这样写的然后XML文件是这样写的然后就出现那个错误了。查了才知道是Page对象的问题所以如果你和我一样只是想要随机连表查询一条数据的话…...

编程日记 2024/12/25 7:11:44

别人的域名解析到了我的网站上/高端网站建设公司排名

Java异常开始前还是来个小测试，下面的程序运行结果是什么？测试Inner Exception没有了，为什么会出现上面的结果呢？原因就是在try-finally中，如果finally中有throw和return，就会覆盖try-catch中的throw和retu…...

编程日记 2024/12/25 4:55:11

前沿简介

圣杯布局

DOM结构

CSS代码

双飞翼布局

DOM结构

CSS代码

扩展实现

1.使用calc()

2.使用border-box

3.使用flex

相关文章：