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

圣杯布局的实现方式

news 2026/2/9 17:44:41

1.什么是圣杯布局？

左右盒子固定，中间盒子自适应

2.实现方式

（1）flex布局

思路：左右盒子给固定的宽高，中间盒子flex:1

<!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>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    display: flex;
    width: 100vw;
    height: 100vh;
  }

  .one {
    width: 20vw;
    height: 20vh;
    background-color: yellowgreen;
  }

  .two {
    flex: 1;
    height: 20vh;
    background-color: plum;
  }

  .three {
    width: 20vw;
    height: 20vh;
    background-color: pink;
  }

</style>

<body>

<div class="box">
  <div class="one">盒子1</div>
  <div class="two">盒子2</div>
  <div class="three">盒子3</div>
</div>

</body>

</html>

（2）浮动

思路：左盒子左浮，右盒子右浮，中间盒子不动，要注意布局顺序，盒子3在盒子2前面

<!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>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100vw;
    height: 100vh;
  }

  .one {
    float: left;
    width: 20vw;
    height: 20vh;
    background-color: yellowgreen;
  }

  .two {
    height: 20vh;
    background-color: yellow;
  }

  .three {
    float: right;
    width: 20vw;
    height: 20vh;
    background-color: pink;
  }
</style>

<body>

<div class="box">
  <div class="one">盒子1</div>
  <div class="three">盒子3</div>
  <div class="two">盒子2</div>
</div>

</body>

</html>

（3）定位

思路：父级相对定位、左右绝对定位，中间盒子不动

<!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>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  .one {
    position: absolute;
    top: 0;
    left: 0;
    width: 20vw;
    height: 20vh;
    background-color: yellowgreen;
  }

  .two {
    height: 20vh;
    background-color: plum;
  }

  .three {
    position: absolute;
    top: 0;
    right: 0;
    width: 20vw;
    height: 20vh;
    background-color: pink;
  }
</style>

<body>
  <div class="box">
    <div class="one">盒子1</div>
    <div class="two">盒子2</div>
    <div class="three">盒子3</div>
  </div>
</body>

</html>

相关文章：

圣杯布局的实现方式

1.什么是圣杯布局&#xff1f; 左右盒子固定&#xff0c;中间盒子自适应 2.实现方式 &#xff08;1&#xff09;flex布局 思路&#xff1a;左右盒子给固定的宽高&#xff0c;中间盒子flex:1 <!DOCTYPE html> <html lang"en"> <head> <met…...

编程日记 2023/3/2 23:23:07

RecastDemo用法

这里写自定义目录标题recastnavigation介绍recastnavigation的内容RecastDemo安装RecastDemo介绍可配置参数合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个…...

编程日记 2023/3/2 23:22:01

IIC总线式驱动开发（mpu6050）（二）

目录 六、I2C总线二级外设驱动开发方法 七、I2C总线二级外设驱动开发之名称匹配 1. i2c_register_board_info 2. i2c_new_device&#xff1a;明确二级外设地址的情况下可用 3. i2c_new_probed_device 八、I2C总线二级外设驱动开发之设备树匹配 六、I2C总线二级外设驱动开…...

编程日记 2023/3/2 23:20:54

盘点一下那些远程办公的神仙公司

其实远程办公已经有50多年的历史了&#xff0c;这几年&#xff0c;这种工作方式越来越受到大家的喜欢&#xff0c;对于员工来说&#xff0c;工作效率可以大幅提高&#xff0c;节省下来的通勤时间和成本&#xff0c;有更多的时间花在工作上。可以更好的平衡工作与生活。对于公司…...

编程日记 2023/3/2 23:19:48

Spring Cloud Alibaba全家桶（四）——微服务调用组件Feign

前言 本文小新为大家带来 微服务调用组件Feign 的相关知识&#xff0c;具体内容包含什么是Feign&#xff0c;Spring Cloud Alibaba快速整合OpenFeign&#xff0c;Spring Cloud Feign的自定义配置及使用&#xff08;包括&#xff1a;日志配置、契约配置、自定义拦截器实现认证逻…...

编程日记 2023/3/2 23:18:44

安装pytorch

一、在anaconda中创建虚拟环境 打开Anaconda Prompt创建一个虚拟环境。比如要创建一个名字为pytorch的虚拟环境&#xff0c;可以如下输入。其中python3.7指定该虚拟环境的python版本号。 conda create -n pytorch python3.7 二、进入新创建的虚拟环境。 创建好虚拟环境后&a…...

编程日记 2023/3/2 23:17:37

自动化测试 Appium之Python运行环境搭建 Part2

环境部署 1、安装Android SDK 安装好后&#xff0c;配置ANDROID_HOME环境变量&#xff0c;设置为Android SDK安装路径(例中&#xff1a;D:\Program Files (x86)\Android\android-sdk) 2、安装其它SDK相关软件包 安装好Android SDK后&#xff0c;选择打开Android SDK Manager…...

编程日记 2023/3/2 23:16:30

LeetCode 2 - 两数相加

给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 开…...

编程日记 2023/3/2 23:15:26

用Python实现九九乘法表的几种方式，最简单只需一行代码

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 我们在学习Python的过程中需要不断的积累和练习&#xff0c;这样才能够走的更远&#xff0c; 今天一起来学习怎么用Python写九九乘法表~ 更多教程源码资料电子书: 点击此处跳转文末名片获取 第一种方法、for-for 代码&…...

编程日记 2023/3/2 23:14:20

入职外包三个月，我提桶跑路了

有一种打工人的羡慕&#xff0c;叫做“大厂”。 真是年少不知大厂香&#xff0c;错把青春插稻秧。 但是&#xff0c;在深圳有一群比大厂员工更庞大的群体&#xff0c;他们顶着大厂的“名”&#xff0c;做着大厂的工作&#xff0c;还可以享受大厂的伙食&#xff0c;却没有大厂…...

编程日记 2023/3/2 23:13:16

企业邮箱对企业有哪些好处以及便捷性

企业邮箱拥有更专业的办公功能&#xff0c;更适合职场使用。同时&#xff0c;使用企业邮箱还可以帮助企业“公私分明”。一方面保护了公司信息&#xff0c;另一方面也提高了工作效率。加上公司统一邮箱也有助于提升公司形象。使用企业邮箱除了收发邮件方便外&#xff0c;还可以…...

编程日记 2023/3/2 23:12:11

ConvNeXt V2实战：使用ConvNeXt V2实现图像分类任务（一）

文章目录摘要安装包安装timm安装 grad-cam数据增强Cutout和MixupEMA项目结构计算mean和std生成数据集关于不上分的问题摘要 论文&#xff1a;https://arxiv.org/pdf/2301.00808.pdf 论文翻译&#xff1a;https://wanghao.blog.csdn.net/article/details/128541957 官方源码&am…...

编程日记 2023/3/2 23:11:03

3.2 报错整理

报错1&#xff1a; 报错&#xff1a;RuntimeError: DataLoader worker (pid 93789) is killed by signal: Killed.原因&#xff1a;显存不够报错2&#xff1a; 报错&#xff1a;TqdmWarning: IProgress not found. Please update jupyter and ipywidgets.解决&#xff1a;pip i…...

编程日记 2023/3/2 23:09:59

从0开始学python -46

Python CGI编程 什么是CGI CGI 目前由NCSA维护&#xff0c;NCSA定义CGI如下&#xff1a; CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如&#xff1a;HTTP服务器&#xff0c;提供同客户端HTML页面的接口。 网页浏览 为了更好的了解CGI是如何工作…...

编程日记 2023/3/2 23:08:52

JavaScript事件委托机制详解

一、什么是事件委托机制 事件委托机制就是&#xff1a;我们给元素添加click事件时不在该元素上添加&#xff0c;而是委托给某个公共的祖辈元素&#xff0c;告诉祖辈元素如果接收到了click事件&#xff0c;并且这个click事件是由该元素触发的&#xff0c;就执行祖辈元素上委托绑…...

编程日记 2023/3/2 23:07:46

【项目实战】MySQL中union和union all的相同点与不同点

一、union和union all的相同点 在MySQL中&#xff0c;Union和Union All都是用来合并两个或者多个查询结果集的关键字 二、union和union all的不同点 union复杂&#xff0c;union all简单 2.1 自动压缩&#xff0c;自动求并集、去重、排序操作 &#xff08;1&#xff09;unio…...

编程日记 2023/3/2 23:06:40

ChatGPT最牛应用，让它帮你更新网站新闻吧！

谁能想到&#xff0c;ChatGPT火了&#xff01;既能对话入流&#xff0c;又能写诗歌论文、出面试题、编代码&#xff0c;甚至还通过了谷歌面试拿到L3工程师offer&#xff0c;放在一年之前&#xff0c;没人相信这是当前AI能够达到的水平。ChatGPT自面世以来&#xff0c;凭借其极为…...

编程日记 2023/3/2 23:05:34

乌班图安装kvm并配置网络

乌班图22安装KVM 1.安装KVM sudo apt install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils virt-manager virtinstsudo adduser id -un libvirt sudo adduser id -un kvm sudo apt install virtinst qemu-efi sudo systemctl enable --now libvirtd sudo s…...

编程日记 2023/3/2 23:04:28

蓝库云｜ERP系统在企业数字化转型中最常用的八大功能

ERP系统和与企业数字化转型 随着数字化发展的兴起&#xff0c;规划和管理已成为企业产生富有成效的成果的关键。许多企业采用了企业资源规划 (ERP) 等先进工具&#xff0c;使企业所有者能够以高效的方式规划和管理其资源和运营。 ERP系统负责整合业务的不同流程并向决策者提供…...

编程日记 2023/3/2 23:03:23

Pytorch学习笔记#1：拟合函数/梯度下降

学习自https://pytorch.org/tutorials/beginner/pytorch_with_examples.html 概念 Pytorch Tensor在概念上和Numpy的array一样是一个nnn维向量的。不过Tensor可以在GPU中进行计算&#xff0c;且可以跟踪计算图&#xff08;computational graph&#xff09;和梯度&#xff08;…...

编程日记 2023/3/2 23:02:14

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2026/2/4 10:28:25

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！ 🌱 前言：一棵树的浪漫，从数组开始说起 程序员的世界里，数组是最常见的基本结构之一，几乎每种语言、每种算法都少不了它。可你有没有想过，一组看似“线性排列”的有序数组，竟然可以**“长”成一棵平衡的二…...

编程新知 2025/8/26 4:33:55

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/12/2 12:05:07