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

圣杯布局的实现方式

news 2026/3/27 4:12:31

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

量化模型精度补偿方案：百川2-13B-4bits在OpenClaw复杂推理中的表现提升

量化模型精度补偿方案&#xff1a;百川2-13B-4bits在OpenClaw复杂推理中的表现提升 1. 量化模型的精度挑战与补偿需求 当我第一次尝试将百川2-13B-4bits量化模型接入OpenClaw进行自动化任务处理时&#xff0c;遇到了一个典型问题&#xff1a;在简单的文件整理和网页操作任务中…...

编程新知 2026/3/27 3:53:34

Transformer在车道线检测中的实战应用：LSTR模型从理论到代码实现

Transformer在车道线检测中的实战应用&#xff1a;LSTR模型从理论到代码实现 自动驾驶技术的快速发展对车道线检测提出了更高要求。传统基于CNN的分割方法往往需要复杂的后处理流程&#xff0c;而LSTR&#xff08;Lane Shape Prediction with Transformers&#xff09;通过端到…...

编程新知 2026/3/27 1:48:31

别再手动写RTL了！用Vivado FIR Compiler IP核5分钟搞定一个低通滤波器

5分钟极速部署&#xff1a;用Vivado FIR Compiler IP核实现专业级低通滤波器 在FPGA信号处理领域&#xff0c;滤波器设计往往需要耗费工程师大量时间在RTL编码和验证上。但今天&#xff0c;我们将颠覆这一传统工作流程——通过Vivado的FIR Compiler IP核&#xff0c;即使没有深…...

编程新知 2026/3/27 0:09:21

如何轻松实现专业音频低延迟：FlexASIO实用配置完全指南

如何轻松实现专业音频低延迟&#xff1a;FlexASIO实用配置完全指南 【免费下载链接】FlexASIO A flexible universal ASIO driver that uses the PortAudio sound I/O library. Supports WASAPI (shared and exclusive), KS, DirectSound and MME. 项目地址: https://gitcode…...

编程新知 2026/3/26 23:39:05

Papercups开源客户聊天系统：7步快速定制部署完整指南

Papercups开源客户聊天系统&#xff1a;7步快速定制部署完整指南 【免费下载链接】papercups Open-source live customer chat 项目地址: https://gitcode.com/gh_mirrors/pa/papercups Papercups是一个功能强大的开源实时客户聊天系统&#xff0c;专为注重数据隐私和安…...

编程新知 2026/3/26 23:32:58

低成本自动化方案：OpenClaw+Qwen3-32B替代SaaS API调用实测

低成本自动化方案&#xff1a;OpenClawQwen3-32B替代SaaS API调用实测 1. 为什么选择本地AI自动化方案 去年我在处理海外客户邮件时&#xff0c;每月需要支付近200美元的SaaS服务费。这些费用主要消耗在邮件分类、摘要生成和自动回复等基础功能上。当我发现OpenClaw框架可以对…...

编程新知 2026/3/26 23:24:55

FastJson内存泄漏实战：我是如何用MAT工具定位到IdentityHashMap这个坑的

FastJson内存泄漏深度剖析&#xff1a;从MAT工具实战到IdentityHashMap陷阱破解 凌晨三点&#xff0c;手机突然响起刺耳的告警声——生产环境某核心服务的堆内存使用率突破95%。作为值班工程师&#xff0c;我瞬间清醒过来。这不是普通的OOM&#xff0c;而是一场持续增长的内存…...

编程新知 2026/3/26 23:10:51

RWKV7-1.5B-g1a多场景落地：HR部门用它自动生成岗位JD要点与面试问题清单

RWKV7-1.5B-g1a多场景落地&#xff1a;HR部门用它自动生成岗位JD要点与面试问题清单 1. 为什么HR部门需要AI助手 招聘工作中有大量重复性文案工作&#xff0c;比如&#xff1a; 为不同岗位编写职位描述(JD)设计结构化面试问题整理岗位核心能力要求制作候选人评估标准 传统方…...

编程新知 2026/3/26 22:50:29

nli-distilroberta-base环境配置：Ubuntu/CentOS下Python依赖与端口映射设置

nli-distilroberta-base环境配置&#xff1a;Ubuntu/CentOS下Python依赖与端口映射设置 1. 项目概述 nli-distilroberta-base是一个基于DistilRoBERTa模型的自然语言推理(NLI)Web服务&#xff0c;专门用于判断两个句子之间的逻辑关系。这个轻量级模型保留了RoBERTa-base模型9…...

编程新知 2026/3/26 21:44:01

深度学习道路提取代码更换数据集后 PyCharm 闪退问题全面解决指南

深度学习道路提取代码更换数据集后 PyCharm 闪退问题全面解决指南 摘要 在基于深度学习的道路提取任务中，更换数据集后常出现 PyCharm 闪退现象。这类问题涉及环境配置、数据加载、内存管理、模型适配等多个层面，往往难以快速定位。本文从 Ubuntu 操作系统、PyCharm IDE、C…...

编程新知 2026/3/26 21:36:00