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

圣杯布局的实现方式

news 文章来源：https://blog.csdn.net/weixin_48082900/article/details/129286255 2024/11/14 11:33:11

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

挑战图像处理100问（24）——伽玛校正

伽马校正&#xff08;Gamma Correction&#xff09;是一种图像处理技术&#xff0c;用于校正显示设备的非线性响应。通过对图像进行伽马变换&#xff0c;可以将图像的亮度范围映射到显示设备的亮度范围内&#xff0c;从而提高图像的对比度和细节&#xff0c;改善图像的视觉效果…...

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

高级信息系统项目管理师（高项）软考论文评分标准（附历年高项论文题目汇总）

1、如果您想了解如何高分通过高级信息系统项目管理师&#xff08;高项&#xff09;你可以点击一下链接&#xff1a; 高级信息系统项目管理师&#xff08;高项&#xff09;高分通过经验分享_高项经验 2、如果您想了解更多的高级信息系统项目管理(高项 软考)原创论文&#xff0…...

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

MySQL实战记录篇2

事务&#xff1f; 1、事务的特性&#xff1a;原子性、一致性、隔离性、持久性 &#xff08;ACID&#xff09; 2、多事务同时执行的时候&#xff0c;可能会出现的问题&#xff1a;脏读、不可重复读、幻读 3、事务隔离级别&#xff1a;读未提交、读提交、可重复读、串行化 4、不…...

编程日记 2023/3/2 22:58:58

C++实现AVL树

目录 一、搜索二叉树 1.1 搜索二叉树概念 二、模拟实现二叉搜索树 2.1 框架 2.2 构造函数 2.2.1 构造函数 2.2.2 拷贝构造 2.2.3 赋值拷贝 2.3 插入函数 2.3.1 insert() 2.3.2 RcInsert() 递归实现 2.4 删除结点函数 2.4.1 Erase() 2.4.2 RcErase() 2.5 中序遍历…...

编程日记 2023/3/2 22:57:51

高并发语言erlang编程初步

初步 下载安装与初步使用 下载并安装&#xff0c;然后开始菜单中有对应的图标&#xff0c;打开就能进入erlang的命令行。当然也可以将其安装路径的bin文件夹加入环境变量&#xff0c;然后就可以在命令行中输入erl进入erlang了。 在erlang语言中&#xff0c;语句结束需要用.标…...

编程日记 2023/3/2 22:56:42

springboot 问题记录

部署到Tomcat中的时候&#xff0c;找不到需要部署的项目&#xff1b; project facets severt-name severt-class安装lombok.jar eclipse添加lombok插件后闪退打不开Clean 项目&#xff0c;project clean clean的作用检查插件部署项目Springboot修改端口号&#xff1a;applica…...

编程日记 2023/3/2 22:55:36

【PAT甲级题解记录】1034 Head of a Gang (30 分)

【PAT甲级题解记录】1034 Head of a Gang (30 分) 前言 Problem&#xff1a;1034 Head of a Gang (30 分) Tags&#xff1a;图的遍历 连通分量统计 DFS Difficulty&#xff1a;剧情模式 想流点汗 想流点血 死而无憾 Address&#xff1a;1034 Head of a Gang (30 分) 问题描述 …...

编程日记 2023/3/2 22:54:29

Python搭建一个steam钓鱼网站，只要免费领游戏，一钓一个准

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 我们日常上网的时候&#xff0c;总是会碰到一些盗号的网站&#xff0c;或者是别人发一些链接给你&#xff0c; 里面的内容是一些可以免费购物网站的优惠券、游戏官网上可以免费领取皮肤、打折的游戏。 这些盗号网站统一的目…...

编程日记 2023/3/2 22:53:24

maven 私服nexus安装与使用

一、下载nexus Sonatype公司的一款maven私服产品 1、官网下载地址&#xff1a;https://help.sonatype.com/repomanager3/product-information/download 2、csdn下载地址&#xff1a;https://download.csdn.net/download/u010197591/87522994 二、安装与配置 1、下载后解压如…...

编程日记 2023/3/2 22:52:17

详解数据结构中的顺序表的手动实现，顺序表功能接口【数据结构】

文章目录线性表顺序表接口实现尾插尾删头插头删指定位置插入指定位置删除练习线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列…...

编程日记 2023/3/2 22:51:11

网站开发区书籍/一个新手怎么做推广

1 #include 文件包含 注意区分尖括号与引号的区别&#xff0c;尖括号告诉预编译器在编译器自带的或外部库的头文件中搜寻被包含的头文件 2 条件编译 包括&#xff1a;#if #ifndef #endif #undef 3 宏替换 #define ,包括有参与无参 编译器 预定义了一些宏 包括 __FILE__ __F…...

编程日记 2024/11/14 9:54:56

网站更换标题/怎么弄一个网站平台

1. 题目介绍&#xff08;53. 在排序数组中查找数字&#xff09; 面试题53&#xff1a;在排序数组中查找数字 一共分为三小题&#xff1a; 题目一&#xff1a;数字在排序数组中出现的次数题目二&#xff1a;0 ~ n-1 中缺失的数字题目三&#xff1a;数组中数值和下标相等的元素 2…...

编程日记 2024/11/14 7:24:59

网页在线设计平台/优化网站最好的刷排名软件

电 子 教 材《圆的周长》教学设计【教学内容】圆周长计算公式的推导&#xff0c;周长计算。(人教版《义务教育课程标准实验教科书数学》六年级第62&#xff5e;64页的教学内容。)【教学目标】1&#xff0e;理解圆周率的意义&#xff0c;推导出圆周长的计算公式&#xff0c;并能…...

编程日记 2024/11/14 5:55:18

网站建设与维护属于什么岗位/百度推广业务员电话

我们在日常工作中经常会遇到各种服务调优&#xff0c;同样&#xff0c;对于 etcd 集群来说&#xff0c;也需要对其进行调优&#xff0c;使其处于最佳的状态。 这一讲我将通过分析 etcd 的架构&#xff0c;结合其核心部分对 etcd 集群进行优化。 etcd 整体分析 在对 etcd 进行调…...

编程日记 2024/11/14 5:15:23

河南免费网站建设/关键词优化排名费用

下载git 下载地址:https://npm.taobao.org/mirrors/git-for-windows/ 安装时,无脑下一步 如果已下载记得卸载,清理环境变量 配置账号密码 查询账号密码 第一件事初始化仓库 如果不想初始化仓库,也可以克隆传承仓库(记得删除初始化仓库) 查看文件状态 添加暂存区 添加本…...

编程日记 2024/11/14 3:51:09

潍坊专业网站建设公司/正规seo关键词排名哪家专业

循环结构 1、概念&#xff1a;通过某个条件&#xff0c;重复的执行一段逻辑代码 2、while 循环 语法&#xff1a; while(布尔表达式){// 逻辑代码&#xff08;循环操作&#xff09; }执行流程 先对布尔表达式进行判断&#xff0c;结果为true&#xff0c;则执行逻辑代码本次…...

编程日记 2024/11/14 2:04:53