使用弹性盒子flex对html进行布局和动态计算视口高度

使用弹性盒子flex对html进行布局的一个练习

height: calc(100vh - 4px);   # vh表示视口高度的百分比,所以100vh表示整个视口的高度。

.mytxt {

    text-indent: 2em; /* 首航缩进2字符 */

    line-height: 2; /* 2倍行高 */

    padding: 8px; /* 内容与边框的距离 */

}

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="jquery.min.js"></script><style>body {margin: 0;padding: 0;}/* 在css中设置 row */.content{width: 100%;#height: 700px;height: calc(100vh - 4px);display : flex; /* 弹性盒子布局 */flex-direction: row;   /* flex-direction属性决定主轴的方向 *//*  justify-content属性定义了项目在主轴上的对齐方式 */justify-content: flex-start;align-content:flex-start; /*  align-items属性定义项目在交叉轴(侧轴)上如何对齐  */}.content-item{		border:1px solid red;margin: 10px;}.item1{width:45%;}.item2{width:55%;	}.leftrow1 {border:1px solid blue;width:100%;height:30%;}.leftrow2 {border:1px solid blue;width:100%;height:30%;}.leftrow3 {border:1px solid blue;width:100%;height:40%;}.rightrow {border:1px solid green;width:100%;height:50%;}.mytxt {				text-indent: 2em; /* 首航缩进2字符 */line-height: 2; /* 2倍行高 */padding: 8px; /* 内容与边框的距离 */}</style></head><body><div class="content" id="app"><!-- left 45% --><div class="content-item item1"><div class="leftrow1"></div><div class="leftrow2"></div><div class="leftrow3  content"><div class="content-item item1"></div>		<div class="content-item item2"></div>		</div>			</div><!-- left 55% --><div class="content-item item2"><div class="rightrow"></div><div class="rightrow content"><div class="content-item item1"></div>		<div class="content-item item2"></div>		</div></div>		</div></body></html>

效果如图

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis到底是什么?都有哪些特性?看完这一篇就都会了

目录 Redis是什么 Redis的应用场景有哪些&#xff1f; Redis的数据类型及主要特性 Redis的数据结构 简单动态字符串SDS (Simple Dynamic String) SDS的特点 Redis特性1&#xff1a;事务 Redis特性2&#xff1a;发布订阅(Pub/Sub) Redis特性3&#xff1a;Stream Redis…

Tailwind CSS浅析与实操

Tailwind CSS 一、Tailwind CSS简介 What is Tailwind CSS Tailwind CSS| TailwindCSS中文文档 | TailwindCSS中文网官方解释&#xff1a;只需书写 HTML 代码&#xff0c;无需书写 CSS&#xff0c;即可快速构建美观的网站。本质上是一个工具集&#xff0c;包含了大量类似 fle…

程序无法启动,提示“找不到msvcp140.dll”或“msvcp140.dll缺失报错”解决方法

大家好&#xff01;今天我来给大家分享一下msvcp140.dll丢失的解决方法。我们都知道&#xff0c;在运行一些软件或游戏时&#xff0c;经常会遇到“找不到msvcp140.dll”的错误提示&#xff0c;这会让我们非常苦恼。那么&#xff0c;这个问题该怎么解决呢&#xff1f;下面我将为…

等精度频率计verilog,quartus仿真视频,原理图,代码

名称&#xff1a;等精度频率计设计verilog quartus仿真 软件&#xff1a;Quartus 语言&#xff1a;Verilog 要求&#xff1a; A&#xff1a;测量范围信号:方波 频率:100Hz~1MHz; B&#xff1a;测试误差:<0.1%(全量程) C&#xff1a;时钟频率:50kHz D&#xff1a;预闸…

Django 前端模板显示换行符、日期格式

linebreaksbr 显示换行符 <td>{{ data.sku_list|default:"无"|linebreaksbr }}</td> date:"Y年m月d日 H:i" 设置日期格式 <td>{{ data.submit_time|date:"Y年m月d日 H:i" }}</td> 其他语法 forloop 获取循环的索引 …

ChatGLM2-6B微调实践

ChatGLM2-6B微调实践 环境准备安装部署1、安装 Anaconda2、安装CUDA3、安装PyTorch4、安装 ChatGLM2-6B 微调实践1、准备数据集2、安装python依赖3、微调并训练新模型4、微调后模型的推理与评估5、验证与使用微调后的模型 微调过程中遇到的问题 环境准备 申请阿里云GPU服务器&…

【虹科分享】什么是Redis数据集成(RDI)?

大量的应用程序、日益增长的用户规模、不断扩展的技术需求&#xff0c;以及对即时响应的持续追求。想想这些是否正是你在经历的。也许你尝试过自己构建工具来应对这些需求&#xff0c;但是大量的编码和集成工作使你焦头烂额。那你是否知道&#xff0c;有这样一个工具可以帮助你…

计算机竞赛 题目:基于深度学习的中文汉字识别 - 深度学习 卷积神经网络 机器视觉 OCR

文章目录 0 简介1 数据集合2 网络构建3 模型训练4 模型性能评估5 文字预测6 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的中文汉字识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &a…

从入门到精通,30天带你学会C++【第七天:for循环和while循环以及数组的学习】(学不会你找我)

目录 Everyday English 前言 数组 数组的概念 数组的定义 数组的下标 for循环 循环是什么 基本格式 多重循环 while循环 do-while循环 总结 Everyday English To shine , not be illuminated. 去发光&#xff0c;而不是被照亮。 前言 好久不见&#xff0c…

kafka初体验基础认知部署

kafka 基础介绍 Apache Kafka是一个分布式流处理平台&#xff0c;最初由LinkedIn开发并于2011年开源。它主要用于解决大规模数据的实时流式处理和数据管道问题。 Kafka是一个分布式的发布-订阅消息系统&#xff0c;可以快速地处理高吞吐量的数据流&#xff0c;并将数据实时地分…

图片素材免费下载,高清无水印,无需担心版权问题。

找图片素材就上这8个网站&#xff0c;免费可商用&#xff0c;建议收藏起来~ 1、菜鸟图库 https://www.sucai999.com/pic.html?vNTYwNDUx 网站主要为新手设计师提供免费素材&#xff0c;这些素材的质量都很高&#xff0c;类别也很多&#xff0c;像平面、UI、电商、视频、图片…

【1++的Linux】之进程(五)

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的Linux】 文章目录 一&#xff0c;什么是进程替换二&#xff0c;替换函数三&#xff0c;实现我们自己的shell 一&#xff0c;什么是进程替换 我们创建出来进程是要其做事情的&#xff0c;它可…

掌握 BERT:自然语言处理 (NLP) 从初级到高级的综合指南(1)

简介 BERT&#xff08;来自 Transformers 的双向编码器表示&#xff09;是 Google 开发的革命性自然语言处理 (NLP) 模型。它改变了语言理解任务的格局&#xff0c;使机器能够理解语言的上下文和细微差别。在本文[1]中&#xff0c;我们将带您踏上从 BERT 基础知识到高级概念的旅…

民族民俗景区3d智慧旅游系统提升游客旅游体验和质量

随着科技的不断发展&#xff0c;传统的旅游方式正在逐渐被新的技术和系统所取代。网上3D沉浸式旅游体验凭借其身临其境的沉浸式体验优势&#xff0c;正成为旅游业的新宠。 网上3D沉浸式旅游体验是将旅游景区、度假区、休闲街区、科博馆等场所空间&#xff0c;利用VR全景制作、w…

vscode刷leetcode使用Cookie登录

1、安装插件 打开vscode&#xff0c;选择扩展&#xff0c;搜索leetcode&#xff0c;选择第一个&#xff0c;带有中文力扣字样&#xff0c;安装后重启 2、切换 选择这个小球&#xff0c;切换中文版本&#xff0c;切换后&#xff0c;会显示一个打勾 3、 选择小球旁边的有箭…

需求放缓、价格战升级、利润率持续恶化对小鹏汽车造成了严重影响

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 收入和每股收益不及预期&#xff0c;亏损创记录 财报显示&#xff0c;小鹏汽车&#xff08;XPEV&#xff09;2023年第二季度收入为50.6亿元人民币(合7亿美元)&#xff0c;略低于预期&#xff0c;而且还产生了比预期更大的亏…

【C++设计模式之建造者模式:创建型】分析及示例

简介 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它将复杂对象的构建过程与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 描述 建造者模式通过将一个复杂对象的构建过程拆分成多个简单的部分&#xff0c;并由不同…

2023年DDoS攻击发展趋势的分析和推断

DDoS是一种非常“古老”的网络攻击技术&#xff0c;随着近年来地缘政治冲突对数字经济格局的影响&#xff0c;DDoS攻击数量不断创下新高&#xff0c;其攻击的规模也越来越大。日前&#xff0c;安全网站Latest Hacking News根据DDoS攻击防护服务商Link11的统计数据&#xff0c;对…

Jenkin 添加节点报错No Known Hosts file was found

/var/lib/jenkins/.ssh/known_hosts [SSH] No Known Hosts file was found at /var/lib/jenkins/.ssh/known_hosts. Please ensure one is created at this path and that Jenkins can read it. /var/lib/jenkins/.ssh/known_hosts 存了是已经接受SSH key认证的目标节点&#x…

2023年【A特种设备相关管理(锅炉压力容器压力管道)】新版试题及A特种设备相关管理(锅炉压力容器压力管道)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;新版试题是安全生产模拟考试一点通生成的&#xff0c;A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;证模拟考试题库是根据A特种设备…