大屏-flex布局

news2024/9/20 2:47:15

<div class="container">
			<div class="title">标题</div>
				<div class="content">
					<div class="item">
					</div>
					<div class="item" style="width: calc((100% - 30) / 3 * 2)">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
				</div>
			</div>
		</div>
html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		.container{
			width: 100%;
			height: 100%;
		}
		.title{
			text-align: center;
			width:100%;
			height: 50px;
			line-height: 50px;
			background-color: #ccc;
			color: #fff;
		}
		.content{
			width: 100%;
			height: calc(100% - 50px);
			background-color: #fff;
			padding: 5px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
		}
		.item{
			flex: 1;
			width: calc((100% - 30px) / 3);
			min-width: calc((100% - 30px) / 3);
			max-width: calc((100% - 30px) / 3);
			background-color: #ccc;
			margin: 5px;
			height: 300px;
		}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1612042.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue报错 Cannot read properties of undefined (reading ‘websiteDomains‘) 解决办法

浏览器控制台如下报错&#xff1a; Unchecked runtime.lastError: The message port closed before a response was received. Uncaught (in promise) TypeError: Cannot read properties of undefined (reading websiteDomains) at xl-content.js:1:100558 此问题困扰了…

Fannel和Calico

一 1、路由器下面每一个端口都是一个vlan,隔离了广播包 192.168.1.0和192.168.2.0他们属于不同的vlan,没有三层交换机或者路由器,他们通不了信 不在同一个vlan,也就是子网,包就会走向网关(也就是路由器那里,路由器有路由表。查看目的地192.168.2.0在b口,从b口出去vlan…

深度学习--CNN卷积神经网络(附图)

框架 让我们先看一下CNN的框架 卷积层中后是ReLu激活函数 &#xff0c;然后是深化池&#xff0c;之后是全连接&#xff0c;最后进行Softmax进行归一化。 所以&#xff0c;我们先逐一了解一下它们各个部分 全连接层 全连接层也称感知机&#xff0c;BP神经网络 全连接层&…

20240330-2-XGBoost面试题

XGBoost面试题 1. RF和GBDT的区别 相同点&#xff1a; 都是由多棵树组成&#xff0c;最终的结果都是由多棵树一起决定。 不同点&#xff1a; 集成学习&#xff1a; R F RF RF属于 B a g g i n g Bagging Bagging思想&#xff0c;而 G B D T GBDT GBDT是 B o o s t i n g Bo…

节点加密技术:保障数据传输安全的新利器

随着信息技术的快速发展&#xff0c;网络数据的安全传输问题日益凸显。节点加密技术作为一种新兴的加密手段&#xff0c;正逐渐成为保障数据传输安全的重要工具。本文将探讨节点加密技术的原理、应用及其优势&#xff0c;并分析其未来的发展趋势。 节点加密技术的原理 节点加密…

EI级 | Matlab实现VMD-TCN-LSTM-MATT变分模态分解卷积长短期记忆神经网络多头注意力多变量时间序列预测

EI级 | Matlab实现VMD-TCN-LSTM-MATT变分模态分解卷积长短期记忆神经网络多头注意力多变量时间序列预测 目录 EI级 | Matlab实现VMD-TCN-LSTM-MATT变分模态分解卷积长短期记忆神经网络多头注意力多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matl…

(助力国赛)美赛O奖数学建模可视化!!!含代码2(箱型图、旭日图、直方图、三元图、平行坐标图、密度图、局部放大图)

众所周知&#xff0c;数学建模的过程中&#xff0c;将复杂的数据和模型结果通过可视化图形呈现出来&#xff0c;不仅能够帮助我们更深入地理解问题&#xff0c;还能够有效地向评委展示我们的研究成果。   今天&#xff0c;承接《可视化代码1》&#xff0c;作者将与大家分享《…

@reduxjs/toolkit进阶指南

虽然reduxjs/toolkit为Redux提供了开箱即用的最佳实践,但它也内置了一些强大的功能,可以极大简化Redux在复杂场景下的使用。本文将重点介绍以下进阶特性: 1.使用Immer简化不可变更新 Redux要求状态更新必须是不可变的,这意味着我们需要手动复制和更新数据,这种模式很容易出错…

Ubuntu 微调训练ChatGLM3大语言模型

Ubuntu 微调训练ChatGLM3大语言模型 LLaMA Factory 的 LoRA 微调提供了 3.7 倍的加速比&#xff0c;同时在广告文案生成任务上取得了更高的 Rouge 分数。结合 4 比特量化技术&#xff0c;LLaMA Factory 的 QLoRA 微调进一步降低了 GPU 显存消耗。 https://github.com/hiyouga…

天星金融(原小米金融)履行社会责任,提高社保政策知晓度

二十大报告指出“为民造福是立党为公、执政为民的本质要求“&#xff0c;人民幸福安康是推动高质量发展的最终目的。社会保障作为维护社会公平、增进人民福祉的基本制度&#xff0c;既是“安全网”也是“稳定器”&#xff0c;发挥着改善民生的重要作用。为进一步提升人民群众对…

接雨水 , 给定二维图,能容多少水

42. 接雨水 - 力扣&#xff08;LeetCode&#xff09; 看着就是非常常规的题目&#xff0c;所以非常有必要掌握。 最少也把O&#xff08;n^2&#xff09;的方法写出来吧。力扣官方题解的三种方法O&#xff08;n&#xff09;都挺好&#xff0c;不过可能有点难读&#xff0c;在此…

淘宝购物更智能:taobao.item_search API接口实现关键字精准匹配

随着电子商务的飞速发展&#xff0c;淘宝作为中国最大的网络购物平台之一&#xff0c;为亿万消费者提供了便捷、丰富的购物体验。然而&#xff0c;在海量商品中快速找到符合自己需求的商品&#xff0c;一直是消费者面临的挑战。为了提升购物体验&#xff0c;淘宝开放平台提供了…

渐进式交付实践:通过 Argo Rollouts 和 FSM Gateway 实现金丝雀发布

渐进式交付&#xff08;Progressive delivery&#xff09;是一种软件发布策略&#xff0c;旨在更安全、更可控地将新版本软件逐步推出给用户。它是持续交付的进一步提升&#xff0c;允许开发团队在发布新版本时拥有更细粒度的控制&#xff0c;例如可以根据用户反馈、性能指标和…

树莓派3B长时间不操作屏幕息屏无信号处理

树莓派外接显示器&#xff0c;需长时间展示某个网页&#xff0c;经过一段时间&#xff0c;显示器屏幕会黑掉显示无信号。 需修改 /etc/lightdm/lightdm.conf 配置文件中新增如下两行并重启。 xserver-commandX -s 0 dpms sleep-inactive-timeout0

系统架构设计精华知识

数据流风格&#xff1a;适合于分阶段做数据处理&#xff0c;交互性差&#xff0c;包括&#xff1a;批处理序列、管理过滤器。调用/返回风格&#xff1a;一般系统都要用到&#xff0c;包括&#xff1a;主程序/子程序&#xff0c;面向对象&#xff0c;层次结构&#xff08;分层越…

图像分类:Pytorch实现Vision Transformer(ViT)进行图像分类

图像分类&#xff1a;Pytorch实现Vision Transformer&#xff08;ViT&#xff09;进行图像分类 前言相关介绍ViT模型的基本原理&#xff1a;ViT的特点与优势&#xff1a;ViT的缺点&#xff1a;应用与拓展&#xff1a; 项目结构具体步骤准备数据集读取数据集设置并解析相关参数定…

人工智能论文GPT-3(3):2020.5 Language Models are Few-Shot Learners;架构;训练数据集;开源

2.1 模型与架构 我们使用了与GPT-2相同的模型和架构&#xff0c;包括其中描述的改进初始化、预归一化和可逆分词技术&#xff0c;但有所不同的是&#xff0c;我们在Transformer的各层中使用了交替的密集和局部带状稀疏注意力模式&#xff0c;类似于Sparse Transformer 。为了研…

RocketMQ异步消息发送失败重试DEMO

producer.setRetryTimesWhenSendAsyncFailed(3); 都知道通过设置&#xff0c;尝试是在MQClientAPIImpl 中完成 其重试是通过MQClientAPIImpl的onExceptionImpl方法来实现&#xff0c;它会先判断重试次数&#xff0c;然后重新调用sendMessageAsync方法进行重试&#xff0c;调用…

【氧化镓】Ga2O3 MOSFET器件的单SEB机制TCAD研究

本文是一篇关于氧化镓(Ga2O3)金属氧化物半导体场效应晶体管(MOSFET)在单粒子烧毁(single event burnout, SEB)事件中的机制研究的文章。文章通过使用技术计算机辅助设计(TCAD)模拟来探究侧向耗尽型氧化镓MOSFET设备在SEB中的敏感区域和安全操作电压&#xff0c;并提出了辐射损伤…

Linux环境变量深度解析

文章目录 一、引言二、环境变量的基本概念1、环境变量的定义2、环境变量的作用与意义 三、环境变量的导入1、导入所需文件2、登陆时的导入 四、环境变量的设置方法1、查看环境变量的方式2、使用export命令临时设置环境变量3、修改配置文件以永久设置环境变量 五、命令行参数与环…