html 元素宽度自适应 占据剩余宽度

在这里插入图片描述

弹性盒实现

父元素设置display: flex;
需要自适应宽度的子元素设置flex: 1;

<html lang="en">
<head><style>*{margin: 0;padding: 0;}.main{display: flex;}.box1,.box2{width: 100px;height: 200px;}.box1{background: rgb(134 187 233);}.box2{flex: 1;background: rgb(169 213 184);}</style>
</head>
<body><div class="main"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

calc方法实现

父元素设置display: flex;把子元素弄到一行里
需要自适应宽度的子元素设置width: calc(100% - 100px);
中间 - 是减号运算符,运算符两边必须有空格,否则calc代码不生效

<html lang="en">
<head><style>.main{display: flex;}.box1,.box2{width: 100px;height: 200px;}.box1{background: rgb(134 187 233);}.box2{width: calc(100% - 100px);background: rgb(169 213 184);}</style>
</head>
<body><div class="main"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

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

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

相关文章

【javaWeb 第五篇】后端-Http协议学习

HTTP协议 HTTP概述HTTP-请求数据格式HTTP响应格式HTTP-协议解析 HTTP概述 Hyper Text Transfer Protocol,超文本传输协议&#xff0c;规定了浏览器和服务器之间的数据传输规则 简述概念就是&#xff0c;浏览器需要向服务器发送请求&#xff0c;想要得到服务器中的数据&#xff…

2014年认证杯SPSSPRO杯数学建模B题(第一阶段)位图的处理算法全过程文档及程序

2014年认证杯SPSSPRO杯数学建模 B题 位图的处理算法 原题再现&#xff1a; 图形&#xff08;或图像&#xff09;在计算机里主要有两种存储和表示方法。矢量图是使用点、直线或多边形等基于数学方程的几何对象来描述图形&#xff0c;位图则使用像素来描述图像。一般来说&#…

React组件如何通信

组件之间的通信,有四种类型: 父组件向子组件传递子组件向父组件传递兄弟组件之间传递父组件向子组件传递 由于React有单向数据流动的特性,所以父组件向子组件传递是最常见的方式。 父组件在调用子组件的时候,在组件标签内传递参数,子组件通过props属性获取父组件传递过来…

Share-ChatGPT官网UI/文件上传/联网搜索/GPTS 一并同步

地址&#xff1a;Share-ChatGPT 文章目录 界面UI&#xff0c;GPTS&#xff0c;读论文&#xff0c;数据分析&#xff0c;写论文视频演示仓库地址 界面 支持多账号同时管理&#xff0c;合理利用资源&#xff1a; UI&#xff0c;GPTS&#xff0c;读论文&#xff0c;数据分析&a…

【node】Missing script start or file server.js

错误 项目中没有找到启动脚本 start 或者 server.js 文件。pnpm start 命令默认会去寻找 start 脚本或者 server.js 文件来启动应用&#xff0c;但是在你的项目中没有找到这些文件&#xff0c;所以报错了。 $ pnpm startERR_PNPM_NO_SCRIPT_OR_SERVER  Missing script start…

论文篇06-论文范文-论基于架构的软件设计方法ABSD及应用(2024年软考高级系统架构设计师冲刺知识点总结系列文章)

试题 试题:论基于架构的软件设计方法(ABSD)及应用 基于架构的软件设计(Architecture-Based Software Design,ABSD)方法以构成软件架构的商业、质量和功能需求等要素来驱动整个软件开发过程。ABSD是一个自顶向下,递归细化的软件开发方法,它以软件系统功能的分解为基础…

Springboot vue elementui 在线考试系统案例源码

Springboot vue elementui 在线考试系统案例源码 链接地址

Go语言学习Day3:数据类型、运算符与流程控制

名人说&#xff1a;莫愁千里路&#xff0c;自有到来风。 ——钱珝 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、数据类型①布尔类型②整型③浮点型④string⑤类型转换 2、运算符①算术运算符②逻辑运算符③关…

基于微信小程序电影院订票选座系统 (后台JSP+JDBC+Mysql)答辩常规问题和如何回答(答辩指导)

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

竞赛 python 爬虫与协同过滤的新闻推荐系统

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python 爬虫与协同过滤的新闻推荐系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&…

Go-Gin-Example 第八部分 优化配置接口+图片上传功能

文章目录 前情提要本节目标 优化配置结构讲解落实修改配置文件优化配置读取及设置初始化顺序第一步 验证 抽离file 实现上传图片接口图片名加密封装image的处理逻辑编写上传图片的业务逻辑增加图片上传的路由 验证实现前端访问 http.FileServerr.StaticFS修改文章接口新增、更新…

Spark RDD、DataFrame和DataSet的区别

Spark RDD、DataFrame和DataSet的区别 在比较这三者的区别之前&#xff0c;先看看他们各自的定义是什么。 Spark RDD RDD是一种弹性分布式数据集&#xff0c;是一种只读分区数据。它是spark的基础数据结构&#xff0c;具有内存计算能力、数据容错性以及数据不可修改特性。 S…

[CISCN2019 华东北赛区]Web2

[CISCN2019 华东北赛区]Web2 随便注册一个登录&#xff0c;发现 还有反馈页面&#xff0c;一看就知道大概率是xss&#xff0c;应该是为了得到管理员cookie扫描了一下&#xff0c;果然有admin.php后台登录 buu可以连接访问外网了&#xff0c;所以内部的xss平台关闭了&#xff0…

静态住宅IP好用吗?怎么选择?

在进行海外 IP 代理时&#xff0c;了解动态住宅 IP 和静态住宅 IP 的区别以及如何选择合适的类型非常重要。本文将介绍精态住宅 IP 特点和&#xff0c;并提供选择建议&#xff0c;帮助您根据需求做出明智的决策。 静态住宅 IP 的特点 静态住宅 IP 是指 IP 地址在一段时间内保…

深度理解文件操作

目录 文件 文件名&#xff1a; 标准流 文件指针 文件的打开和关闭 文件的顺序读写&#xff1a; 使用部分 文件的打开和关闭 文件 文件分两种&#xff0c;第一种是程序文件&#xff0c;后一种是数据文件。 程序文件&#xff1a;包括源程序文件&#xff08;后缀为.c&…

如何使用WordPress插件保护网站的安全

前段时间我们的网站受到了黑客的攻击&#xff0c;网站丢失了一些重要的数据&#xff0c;为了防止这种情况的再次发生&#xff0c;我们准备将网站全部迁移到高防服务器&#xff0c;经过一番对比后&#xff0c;我们选择了Hostease提供的高防服务器。它可以有效地抵御各种类型的网…

银行单元化架构体系介绍

1.背景 自2018年以来&#xff0c;受“华为、中兴事件”影响&#xff0c;我国科技受制于人的现状对国家稳定和经济发展都提出了严峻考验。目前我国IT架构体系严重依赖国外产品&#xff0c;金融行业尤其明显。大部分传统银行的关键账务系统都架设在IBM的大型机、小型机之上&…

【jenkins+cmake+svn管理c++项目】创建一个项目

工作台点击"新建item",进入下图&#xff0c;选择Freestyle project,并输入项目名称&#xff0c; 点击确定之后进入项目配置页面&#xff0c;填写描述&#xff0c;然后在下边源码管理部分选择svn, 填写代码的url 上图的Credentials处填写svn的有效登录名和密码&#x…

【Python操作基础】——元组

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

05、Lua 变量

Lua 变量 Lua 变量赋值语句 Lua 变量 变量在使用前&#xff0c;必须在代码中进行声明&#xff0c;即创建该变量。编译程序执行代码之前编译器需要知道如何给语句变量开辟存储区&#xff0c;用于存储变量的值。 Lua变量有三种类型&#xff1a;全局变量、局部变量、表中的域。 …