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

css圣杯布局和双飞翼布局

news 2026/2/9 3:06:46

 圣杯布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>实现圣杯布局</h1><div id="header">Header</div><div id="content"><!-- 这里注意要将middle即中间区域放在左边和右边前面，因为我们的需求是中间一栏最先加载、渲染出来，根据执行顺序所以把middle放在第一个。 --><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div>
</body>
<style>body {/* 设置最小宽度，防止挤压使中间内容消失 */ min-width: 500px;}div {text-align: center;}#header {background-color: #f1f1f1;}#content {padding-left: 300px;padding-right: 200px;}#content #center {background-color: #ddd;width: 100%;}#content #left {position: relative;width: 300px;background-color: orange;margin-left: -100%;right: 300px;}#content #right {background-color: green;width: 200px;margin-right: -200px;}
/* 这里当我们给每中间内容的每一栏都加上float:left之后容易导致高度塌陷，解决办法 clear: both; overflow:hidden  */#content .column {float: left;}#footer {/* 清除浮动 */clear: both;background-color: #f1f1f1;}
</style>
</html><!--  问题:高度塌陷 是什么意思
怎么解决: 
overflow:hidden 【这里触发了BFC——BFC是一个独立的布局环境，可以理解为一个看不见的盒子，盒子内部的物品摆放不受外界环境影响。】 
clear:both -->
<!-- 圣杯布局：将中间的三个模块实现成为三栏布局，中间栏自适应，两侧内容宽度固定，三栏布局，中间一栏最先加载，渲染出来 
1.由于中间栏自使用，所以宽度设置为100%，
2.左右两栏使用 float:left 同时使用clear:both 解决高度塌陷的问题
3.将左右两栏的盒子移动上去 【这里通过相对定位我们可以看到是一行挤不下换成了两行，所以想左移动相应的位置就行了向左移动的位置是100%+盒子的宽度】
4.注意设置设置最小宽度，防止挤压使中间内容消失
圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过margin-left定位到相应位置。
-->

双飞翼布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双飞翼布局</title>
</head><body><div class="container"><div class="wrapper"><div class="center">mid</div></div><div class="left">left</div><div class="right">right</div></div>
</body>
<style>.container {height: 100px;}.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;}.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold;}.wrapper {float: left;width: 100%;height: 100px;background: lightgreen;}.center {margin-left: 100px;margin-right: 200px;height: 100px;}
</style></html>

总结

相同点：

都实现了三栏布局，都使用了浮动

不同点：

圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。

双飞翼布局是通过float+margin，没有使用相对定位。

对于两列的处理：

圣杯布局是给外部容器加padding，通过相对定位把两边定位出来。

双飞翼布局是靠在中间这层外面套一层div加padding将内容挤出来中间。

相关文章：

css圣杯布局和双飞翼布局

圣杯布局 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, in…...

编程日记 2023/10/5 11:27:34

机器学习笔记 - 深入研究spaCy库及其使用技巧

一、简述 spaCy 是一个用于 Python 中高级自然语言处理的开源库。它专为生产用途而设计，这意味着它不仅功能强大，而且快速高效。spaCy 在学术界和工业界广泛用于各种 NLP 任务，例如标记化、词性标注、命名实体识别等。 安装，这里使用阿里的源。 pip install spacy…...

编程日记 2023/10/5 11:25:31

网站强制跳转至国家反诈中心该怎么办？怎么处理？如何解封？

在互联网环境中&#xff0c;网站安全是非常重要的。然而&#xff0c;在实际操作过程中&#xff0c;不少网站可能因内容问题、技术安全漏洞等原因被迫下线甚至跳转至国家反诈骗中心网址。面对这一严峻问题&#xff0c;我们如何有效解决&#xff0c;让网站恢复运行并解除强制跳转…...

编程日记 2023/10/5 11:24:30

2023年10月4日

服务器 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//实例化一个服务器server new QTcpServer(this);//此时&#xff0c;服务器已经成功进入监听状态&…...

编程日记 2023/10/5 11:22:27

MacBook 录制电脑内部声音

MacBook 录制电脑内部声音 老妈喜欢跳广场舞&#xff0c;现在广场舞音频下载都收费了&#xff01;没办法&#xff0c;只能自己录歌了&#xff0c;外录有杂音大家也都知道&#xff0c;所以就只能采用内录的方式然后再用 Audition 调整一下音量大小。 一、&#xff08;前置条件&a…...

编程日记 2023/10/5 11:21:26

mysql主从复制和读写分离

在企业应用中&#xff0c;成熟的业务通常数据量都比较大 单台MySQL在安全性、高可用性和高并发方面都无法满足实际的需求 配置多台主从数据库服务器以实现读写分离 所以要做主从服务器&#xff0c;保证安全性 做一写一读服务器&#xff0c;将提升性能 1、什么是读写分离 …...

编程日记 2023/10/5 11:19:24

【计算机网络】网络层-数据平面（学习笔记）

一、网络层提供的服务 1、虚电路服务 通讯前建立虚电路&#xff0c;发送前认为选择路径&#xff0c;所以分组沿着同一条虚电路。 特点&#xff1a;带宽固定 2、数据报服务 数据可能沿着不同路径传输 3、网络层的两个层面 数据层面&#xff1a;源主机到目标主机 控制层面&…...

编程日记 2023/10/5 11:17:22

el-collapse 嵌套中 el-checkbox作为标题，选中复选框与el-tree联动

<el-drawertitle"应用授权":visible.sync"menuDrawer"><el-collapse accordion style"padding: 15px"><el-collapse-item v-for"item in platList"><template slot"title"><el-checkbox v-model…...

编程日记 2023/10/5 11:16:20

Ubuntu中还换源 sudo apt-get update更新失败

sudo apt-get update更新失败 1 前提2 编辑3 换源 1 前提 浏览器可以访问百度 如下文章&#xff1a; VMware 中虚拟机没网 2 编辑 输入如下命令&#xff0c;进入换源文件&#xff1a; sudo gedit /etc/apt/sources.list 3 换源 中科大 deb http://mirrors.ustc.edu.cn/ub…...

编程日记 2023/10/5 11:11:15

flutter播放rtmp视频

安装 dependencies:fijkplayer: ^0.11.0使用方法 import package:fijkplayer/fijkplayer.dart; import package:flutter/material.dart;class RtmpPlayerPage extends StatefulWidget {const RtmpPlayerPage({super.key});overrideState<RtmpPlayerPage> createState()…...

编程日记 2023/10/5 11:10:12

stm32 - 中断

stm32 - 中断 概念中断向量表NVIC 嵌套中断向量控制器优先级 中断EXTI概念基本结构例子- 对射式红外传感器计次例子 - 旋转编码器 概念 stm32 支持的中断资源&#xff08;都属于外设&#xff09; EXTITIMADCUSARtSPII2C stm32支持的中断 内核中断 外设中断 中断通道与优先级 一…...

编程日记 2023/10/5 11:09:09

【洛谷 P1216】[USACO1.5] [IOI1994]数字三角形 Number Triangles 题解（动态规划）

[USACO1.5] [IOI1994]数字三角形 Number Triangles 题目描述 观察下面的数字金字塔。 写一个程序来查找从最高点到底部任意处结束的路径&#xff0c;使路径经过数字的和最大。每一步可以走到左下方的点也可以到达右下方的点。 在上面的样例中&#xff0c;从 7 → 3 → 8 →…...

编程日记 2023/10/5 11:07:07

十四天学会C++之第四天（面向对象编程基础）

类和对象是什么&#xff1f; 在C中&#xff0c;类是一种用户定义的数据类型&#xff0c;它可以包含数据成员&#xff08;也就是属性&#xff09;和成员函数&#xff08;也就是方法&#xff09;。类是一种模板或蓝图&#xff0c;用于创建具体的对象。 对象是类的实例&#xff…...

编程日记 2023/10/5 11:06:05

复习Day09：哈希表part02:141.环形链表、142. 环形链表II、454.四数相加II、383赎金信

之前的blog&#xff1a;https://blog.csdn.net/weixin_43303286/article/details/131765317 我用的方法是在leetcode再过一遍例题&#xff0c;明显会的就复制粘贴&#xff0c;之前没写出来就重写&#xff0c;然后从拓展题目中找题目来写。辅以Labuladong的文章看。然后刷题不用…...

编程日记 2023/10/5 11:05:04

Internet通过TCP/IP协议可以实现多个网络的无缝连接

Internet通过TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff0c;传输控制协议/互联网协议&#xff09;协议实现多个网络的无缝连接。 TCP/IP是Internet的基础通信协议套件&#xff0c;它定义了数据如何在不同网络之间传输和路由&#xff0c;使得…...

编程日记 2023/10/5 11:04:03

互联网Java工程师面试题·Dubbo 篇·第二弹

目录 18、Dubbo 用到哪些设计模式&#xff1f; 19、Dubbo 配置文件是如何加载到 Spring 中的&#xff1f; 20、Dubbo SPI 和 Java SPI 区别&#xff1f; 21、Dubbo 支持分布式事务吗&#xff1f; 22、Dubbo 可以对结果进行缓存吗&#xff1f; 23、服务上线怎么兼容旧版本&…...

编程日记 2023/10/5 11:03:02

（c语言）经典bug

#include<stdio.h> //经典bug int main() { int i 0; int arr[10] {1,2,3,4,5,6,7,8,9,10}; for (i 0; i < 12; i) //越界访问 { arr[i] 0; printf("hehe\n"); } return 0; } 注&#xff1a;输出结果为死循…...

编程日记 2023/10/5 10:57:55

用于工业物联网和自动化的 Apache Kafka、KSQL 和 Apache PLC4

由于单一系统和专有协议&#xff0c;数据集成和处理是工业物联网&#xff08;IIoT&#xff0c;又名工业 4.0 或自动化工业&#xff09;中的巨大挑战。Apache Kafka、其生态系统&#xff08;Kafka Connect、KSQL&#xff09;和 Apache PLC4X 是以可扩展、可靠和灵活的方式实现端…...

编程日记 2023/10/5 10:56:52

1.1.1开发基础-硬件-万用表

​ 1 万用表 万用表又叫多用表、三用表、复用表，是一种多功能、多量程的测量仪表，一般万用表可测量直流电流、直流电压、交流电压、电阻和音频电平等，有的还可以测交流电流、电容量、电感量及半导体的一些参数，是最常用、最简单的测试设备。 万用表是一种多功能多量程的便…...

编程日记 2023/10/5 10:54:50

Mysql内置函数、复合查询和内外连笔记

目录 一、mysql内置函数 1.1.日期函数 1.2.字符串函数 1.3.数学函数 1.4.其他函数 二、复合查询 2.2 自连接 2.3 子查询 2.3.1单行自查询 2.3.2 多行子查询 2.3.3 多列子查询 2.3.4在from子句中使用子查询 2.3.5合并查询 三、表的内连和外连 3.1内连接 3.2外连接…...

编程日记 2023/10/5 10:53:49

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/8 4:37:13

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2026/1/25 3:29:22

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29