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

圣杯布局的实现方式

news 2026/5/12 23:54:22

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

Unity（十六）切换场景及鼠标相关

场景切换空间命名&#xff1a;using UnityEngine.SceneManagement;直接用代码切换场景有问题要把场景加入到场景列表之中SceneList哪个场景在前面&#xff0c;谁在运行时就会首先进入过时方法Application.LoadLevel()if (Input.GetKeyDown(KeyCode.Space)) {SceneManager.LoadS…...

编程新知 2026/5/12 21:58:42

JPlag代码抄袭检测：17种编程语言的智能原创守护者

JPlag代码抄袭检测&#xff1a;17种编程语言的智能原创守护者 【免费下载链接】JPlag State-of-the-Art Source Code Plagiarism & Collusion Detection. Check for plagiarism in a set of programs. 项目地址: https://gitcode.com/gh_mirrors/jp/JPlag 在数字化教…...

编程新知 2026/5/12 21:03:38

英特尔转型芯片代工：从IDM巨头到服务商的六大挑战与机遇

1. 英特尔代工之路&#xff1a;从IDM巨头到服务提供商的六大挑战在半导体行业&#xff0c;英特尔这个名字几乎就是高性能微处理器的代名词。这家公司凭借其垂直整合制造模式&#xff0c;在过去几十年里构筑了难以撼动的技术护城河。然而&#xff0c;当行业的目光从单纯的制程竞…...

编程新知 2026/5/12 19:45:26

初次使用Taotoken平台从注册到完成API调用的全程指引

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初次使用Taotoken平台从注册到完成API调用的全程指引 对于初次接触大模型API的开发者而言&#xff0c;从注册平台到成功发出第一个…...

编程新知 2026/5/12 19:41:07

手把手教你配置Synopsys DesignWare PCIe控制器：从寄存器读写到ATU映射实战

Synopsys DesignWare PCIe控制器深度配置指南&#xff1a;从寄存器操作到DMA通信实战 1. PCIe控制器基础架构解析 Synopsys DesignWare PCIe控制器作为业界广泛采用的IP核&#xff0c;其架构设计充分考虑了灵活性和可扩展性。控制器核心由以下几个关键模块组成&#xff1a; Tra…...

编程新知 2026/5/12 19:30:46

VS2019/2022插件安装指南：让CppCheck帮你揪出C++代码里那些编译器发现不了的‘幽灵Bug’

VS2019/2022插件安装指南&#xff1a;让CppCheck帮你揪出C代码里那些编译器发现不了的‘幽灵Bug’ 在C开发中&#xff0c;编译器能捕捉语法错误&#xff0c;但那些潜伏在逻辑深处的"幽灵Bug"——内存泄漏、未初始化变量、数组越界——往往要等到运行时才暴露。CppCh…...

编程新知 2026/5/12 19:22:31

告别繁琐操作：一键下载国家中小学智慧教育平台电子课本的智能解决方案

告别繁琐操作&#xff1a;一键下载国家中小学智慧教育平台电子课本的智能解决方案 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内…...

编程新知 2026/5/12 19:13:47

如何快速掌握Blender精确建模：CAD_Sketcher完整实战指南

如何快速掌握Blender精确建模&#xff1a;CAD_Sketcher完整实战指南 【免费下载链接】CAD_Sketcher Constraint-based geometry sketcher for blender 项目地址: https://gitcode.com/gh_mirrors/ca/CAD_Sketcher 你是否曾经希望在Blender中创建精确的工程图纸&#xff…...

编程新知 2026/5/12 18:48:17

终极免费PDF转SVG工具：简单3步完成高质量转换

终极免费PDF转SVG工具&#xff1a;简单3步完成高质量转换 【免费下载链接】pdf2svg A simple PDF to SVG converter using the Poppler and Cairo libraries 项目地址: https://gitcode.com/gh_mirrors/pd/pdf2svg 在当今数字化时代&#xff0c;PDF转SVG已成为设计师、开…...

编程新知 2026/5/12 18:31:00

告别信号混乱！手把手教你正确处理Qt QLineEdit的编辑完成与回车事件

告别信号混乱&#xff01;手把手教你正确处理Qt QLineEdit的编辑完成与回车事件 在Qt开发中&#xff0c;QLineEdit作为最常用的输入控件之一&#xff0c;其信号处理看似简单却暗藏玄机。许多开发者都曾遇到过这样的困扰&#xff1a;明明只想在用户完成编辑时触发一次验证逻辑&a…...

编程新知 2026/5/12 18:24:15