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

css宽度适应内容

news 文章来源：https://blog.csdn.net/weixin_44368963/article/details/135575903 2025/5/6 22:26:12

废话不多说,看如下demo,我需要将下面这个盒子的宽度变成内容自适应
在这里插入图片描述
方法有很多,如下

父元素设置display:flex 实现子元素宽度适应内容

如下给父元素设置flex能实现宽度自适应内容

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {display: flex;}div {background-color: #0d1472;color: white;}</style></head><body><div>内容自适应宽度</div></body></html>

效果如下
在这里插入图片描述
但是这样有一个小缺点,那就是改变了父元素的display属性,我们仅仅是为了让box的宽度自适应内容,不应该去改变别的元素
所以我们可以使用其它的,如下`1

使用fit-content属性实现box自适应内容

fit-content 行为类似于 fit-content(stretch)，实际上这意味着盒子会使用可用的空间，但永远不会超过,

意味着fit-content 的宽度会使用内容的宽度,但是不会超过max-width的宽度
示例如下

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {background-color: #0d1472;color: white;width: fit-content;}</style></head><body><div>内容自适应宽度</div></body></html>

在这里插入图片描述

相关文章：

css宽度适应内容

废话不多说,看如下demo,我需要将下面这个盒子的宽度变成内容自适应 方法有很多,如下 父元素设置display:flex 实现子元素宽度适应内容 如下给父元素设置flex能实现宽度自适应内容 <!DOCTYPE html><html lang"en"><head><meta charset"U…...

编程日记 2024/1/14 10:23:37

粒子物理和原子核物理的理论在模拟和分析电路中的粒子束和辐射效应中的应用

粒子物理和原子核物理的理论可以应用于模拟和分析电路中的粒子束和辐射效应&#xff0c;特别是在粒子加速器和辐射探测器的设计和优化方面。通过这些理论的应用&#xff0c;可以提高加速器和探测器的性能&#xff0c;推动粒子物理和原子核物理的研究进展。粒子物理和原子核物理…...

编程日记 2024/1/14 10:18:32

Opentsdb官方优化文档 - 翻译

文档地址 : Tuning — OpenTSDB 2.4 documentation Tuning As with any database there are many tuning parameters for OpenTSDB that can be used to improve write and read performance. Some of these options are specific to certain backends, others are global. …...

编程日记 2024/1/14 10:15:30

JavaScript深拷贝与浅拷贝的全面解析

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ 目录 ✨ 前言 ✨ 正文 浅拷贝 对象的浅拷贝 数组的浅拷贝 浅拷贝的问题 深拷贝 什么是深拷贝…...

编程日记 2024/1/14 10:13:28

ESU毅速丨制造企业需不需要建设增材制造中心？

随着科技的不断发展&#xff0c;增材制造技术已经成为制造行业的新宠。越来越多的企业开始考虑建设增材制造中心&#xff0c;以提高生产效率、降低成本、加速产品创新。但是&#xff0c;对于制造企业来说&#xff0c;是否需要建设增材制造中心呢&#xff1f; 首先&#xff0c;我…...

编程日记 2024/1/14 10:12:27

Linux shell编程学习笔记39：df命令

0 前言1 df命令的功能、格式和选项说明 1.1 df命令的功能1.2 df命令的格式1.3 df命令选项说明 2 df命令使用实例 2.1 df&#xff1a;显示主要文件系统信息2.2 df -a&#xff1a;显示所有文件系统信息2.3 df -t[]TYPE或--type[]TYPE&#xff1a;显示TYPE指定类型的文件系统信…...

编程日记 2024/1/14 10:03:17

简单高效 LaTeX 科学排版 第004集 命令与环境

这是《简单高效LaTeX》的第四个视频&#xff0c;主要演示讨论基本命令与排版环境&#xff0c;还有保留字符。 视频地址&#xff1a;https://www.ixigua.com/7298100920137548288?id7298102807985390120&logTagf853f23a668f8a2ee405...

编程日记 2024/1/14 10:02:16

初识XSS漏洞

目录 一、XSS的原理和分类 二、Xss漏洞分类 1. 反射性xss 简单的演示&#xff1a; 2.基于DOM的XSS 简单的演示&#xff1a; 3.存储型XSS ​编辑简单的演示 4、self xss 三、XSS漏洞的危害 四、XSS漏洞的验证 五、XSS漏洞的黑盒测试 六、XSS漏洞的白盒测试 七、XS…...

编程日记 2024/1/14 10:01:15

白嫖aws创建Joplin server服务器

网上有很多的Joplin服务器的搭建教程&#xff0c;但是基本都是抄来抄去&#xff0c;对初学者实在是太不友好了。 话不多说&#xff0c;说干就干&#xff0c;自己从头找资料搭了一个&#xff0c;这可能是全网最好的Joplin服务器搭建教程了。 aws服务器 aws的服务器还是很香的&…...

编程日记 2024/1/14 10:00:15

metartc5_jz源码阅读-p2p通过stun服务器进行通信

1. YangIpc.c/yang_create_ipc 需要设置stun服务器的ip地址和端口号 设置iceCandidateType为2&#xff0c;表示走stun&#xff0c;即向stun服务器发起请求获取本机的公网ip地址。 //设置iceServerIP和端口号&#xff0c;设置iceCandidate类型。 strcpy(session->avinfo.rtc…...

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

总结：Java程序员读书清单顺序

总结&#xff1a;Java程序员读书清单顺序&#xff0c;持续更新中。。。。。。 一经验提示&#xff1a;1.零基础不建议直接看计算机专业书籍&#xff0c;建议先去看视频教程2.本书单目录用作自学顺序记录&#xff0c;也适用于有Java开发基础的同志3.看计算机书籍可以完善自己的技…...

编程日记 2024/1/14 9:55:10

ubuntu通过virtualbox安装win虚拟机

系统&#xff1a;Ubuntu22.04 需要准备&#xff1a;下载你想用的windows的iso镜像&#xff0c;官方传送门。 一、安装virtualbox sudo apt-get install virtualbox安装完成后&#xff0c;打开Applications&#xff0c;找到virtualbox&#xff0c;点击启动 二、安装windows虚…...

编程日记 2024/1/14 9:51:07

云流量回溯的工作原理及关键功能

云计算和网络技术的快速发展为企业提供了更灵活、高效的业务运营环境&#xff0c;同时也引发了一系列网络安全挑战。在这个背景下&#xff0c;云流量回溯成为网络安全领域的一个关键技术&#xff0c;为企业提供了对网络活动的深入洞察和实时响应的能力。 一、 云流量回溯的基本…...

编程日记 2024/1/14 9:50:07

DCP文件传输的重要性与应用

在数字时代&#xff0c;文件传输已成为商业运作中不可或缺的一环。随着企业越来越多地采用云基础设施和服务&#xff0c;有效地在云和团队之间传输大文件和数据集变得至关重要。在这一背景下&#xff0c;数据复制协议&#xff08;DCP&#xff09;文件传输应运而生&#xff0c;引…...

编程日记 2024/1/14 9:49:06

JAVA面试部分——后端-线程后篇

3.12 如果在运行当中&#xff0c;遇到线程不够了&#xff0c;会以什么样的方式创建线程 线程池在运行过程中&#xff0c;如果遇到线程不够的情况&#xff0c;会根据线程池的类型和配置进行不同的处理&#xff1a; 对于固定大小的线程池&#xff1a;如果线程因异常结束&#xff…...

编程日记 2024/1/14 9:47:04

C语言辨析——深入理解字符常量与表达式

1. 问题 今天看到一个题目&#xff0c;截图如下。 从答题情况来看&#xff0c;本题的答案是B&#xff0c;那么就意味着A、C、D是错的。但我认为这4个选项都是对的。当然&#xff0c;如果要从4个选项中挑选一个的话&#xff0c;那还是选择B妥当一些。 2. 分析 字符常量的定义…...

编程日记 2024/1/14 9:45:02

Springboot + websocket 实现 一对一 单人聊天

Springboot websocket 实现 一对一 单人聊天 要使用websocket ,需要添加 jar 打开项目中的pom.xml,添加以下内容 创建java端代码 配置websocke的endpoints 配置websocket的server ServerEndpoint(value "/websocket/{username}") 这句话 一定要注意, 这里 路…...

编程日记 2024/1/14 9:44:01

GEE机器学习——利用最短距离方法进行土地分类和精度评定

最短距离方法 最短距离方法（Minimum Distance）是一种常用的模式识别算法，用于计算样本之间的相似度或距离。该方法通过计算样本之间的欧氏距离或其他距离度量，来确定样本之间的相似程度或差异程度。 最短距离方法的具体步骤如下： 1. 数据准备：收集并准备用于训练的数据…...

编程日记 2024/1/14 9:40:59

数据结构时间复杂度与空间复杂度

文章目录 引入算法 1、时间复杂度1.概念2.大O渐进表示法3.常见时间复杂度计算举例 2、空间复杂度1.概念2.常见空间复杂度计算举例 引入 算法 算法就是一段能将一个物体从初始状态转换到某个目标转态的一个有限长序列方法的统称 算法效率&#xff1a;考虑一个方法是否好&…...

编程日记 2024/1/14 9:39:58

【计算机网络】内容整理

概述 分组交换 分组交换则采用存储转发&#xff08;整个包必须到达路由器&#xff0c;然后才能在下一个链路上传输)技术。 在发送端&#xff0c;先把较长的报文划分成较短的、固定长度的数据段。 电路交换 在端系统间通信会话期间&#xff0c;预留了端系统间沿路径通信所需…...

编程日记 2024/1/14 9:38:58

【K12】Python写分类电阻问题的求解思路解析

分压电阻类电路问题python程序写法 一个灯泡的电阻是20Ω&#xff0c;正常工作的电压是8V&#xff0c;正常工作时通过它的电流是______A。现在把这个灯泡接到电压是9V的电源上&#xff0c;要使它正常工作&#xff0c;需要给它______联一个阻值为______的分压电阻。 解决思想 …...

编程日记 2024/1/14 9:34:54

数据库面经---10则

数据库范式有哪些&#xff1a;​​​​​​​ 第一范式&#xff08;1NF&#xff09;&#xff1a; 数据表中的每一列都是不可分割的原子值。每一行数据在关系表中都有唯一标识&#xff0c;通常是通过主键来实现。第二范式&#xff08;2NF&#xff09;&#xff1a; 满足第一范式。…...

编程日记 2024/1/14 9:32:52

深度学习基本介绍-李沐

目录 AI分类&#xff1a;模型分类&#xff1a;广告案例&#xff1a; bilibili视频链接&#xff1a;https://www.bilibili.com/video/BV1J54y187f9/?p2&spm_id_frompageDriver&vd_sourcee6a6e7fec41c59c846c142eb5ef1da0b AI分类&#xff1a; 模型分类&#xff1a; 图…...

编程日记 2024/1/14 9:31:51

【上分日记】第369场周赛（分类讨论 + 数学 + 前缀和）

文章目录 前言正文1.3000. 对角线最长的矩形的面积2.3001. 捕获黑皇后需要的最少移动次数3.3002. 移除后集合的最多元素数3.3003. 执行操作后的最大分割数量 总结尾序 前言 终于考完试了&#xff0c;考了四天&#xff0c;也耽搁了四天&#xff0c;这就赶紧来补这场周赛的题了&a…...

编程日记 2024/1/14 9:30:51

CMake Error at CMakeLists.txt:14 (project): The CMAKE_CXX_COMPILER:

报错 CMake Error at CMakeLists.txt:14 (project):The CMAKE_CXX_COMPILER:arm-none-eabi-g 解决办法1 Arm GNU Toolchain Downloads – Arm Developer x86_64 linux上&#xff1a; x86_64 Linux hosted cross toolchains AArch32 bare-metal target (arm-none-eabi)arm-g…...

编程日记 2024/1/14 9:29:50

Sqoop与其他数据采集工具的比较分析

比较Sqoop与其他数据采集工具是一个重要的话题&#xff0c;因为不同的工具在不同的情况下可能更适合。在本博客文章中&#xff0c;将深入比较Sqoop与其他数据采集工具&#xff0c;提供详细的示例代码和全面的内容&#xff0c;以帮助大家更好地了解它们之间的差异和优劣势。 Sq…...

编程日记 2024/1/14 9:24:45

Pandas实战100例 | 案例 31: 转换为分类数据

案例 31: 转换为分类数据 知识点讲解 在处理包含文本数据的 DataFrame 时&#xff0c;将文本列转换为分类数据类型通常是一个好主意。这可以提高性能并节省内存。Pandas 允许将列转换为 category 类型。 分类数据类型: category 类型适用于那些只包含有限数量不同值的列&…...

编程日记 2024/1/14 9:23:44

椋鸟C语言笔记#33：文件的顺序读写

萌新的学习笔记&#xff0c;写错了恳请斧正。 目录 光标&#xff08;文件位置指示器&#xff09; 文件的顺序读写 fgetc 使用实例 fputc 使用实例 fgets fputs 使用实例 fscanf fprintf fread fwrite 使用实例 光标&#xff08;文件位置指示器&#xff09; 我们…...

编程日记 2024/1/14 9:21:43

Transformer - Attention is all you need 论文阅读

虽然是跑路来NLP&#xff0c;但是还是立flag说要做个project&#xff0c;结果kaggle上的入门project给的例子用的是BERT&#xff0c;还提到这一方法属于transformer&#xff0c;所以大概率读完这一篇之后&#xff0c;会再看BERT的论文这个样子。 在李宏毅的NLP课程中多次提到了…...

编程日记 2024/1/14 9:16:38

安装配置Flink

安装配置Flink 1.上传安装包到Linux 2.解压到指定路径 tar -zxf ./flink-1.14.0-bin-scala_2.12.tgz /usr/local/src/3.修改环境变量 vi ~/.bashrc#往最后加入 export FLINK_HOME /usr/local/src/flink-1.14.0/ export PATH$PATH:$FLINK_HOME/bin#激活环境变量 source ~/.…...

编程日记 2024/1/14 9:12:35