css宽度适应内容

废话不多说,看如下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>

在这里插入图片描述

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

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

相关文章

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

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

基于Jackson封装的JSON、Properties、XML、YAML 相互转换的通用方法

文章目录 一、概述二、思路三、实现四、测试 一、概述 我们在 yaml转换成JSON、MAP、Properties 通过引入 实现了JSON、Properties、XML、YAML文件的相互转换&#xff0c;具体的类、方法如下&#xff1a; 上面的实现&#xff0c;定义了多个类、多个方法&#xff0c;使用太不…

中仕公考:2024年上半年中小学教师资格考试(笔试)报名已开始

2024年上半年中小学教师资格考试(笔试)报名工作于1月12日开始&#xff0c;此次笔试在31个省(自治区、直辖市)举办&#xff0c;各省(自治区、直辖市)的报名公告将陆续上网。 个别地区报名截止时间有所差异&#xff0c;上海1月13日报名截止&#xff0c;浙江、天津、河南1月14日截…

Redis-Cluster 与 Redis 集群的技术大比拼

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Redis-Cluster 与 Redis 集群的技术大比拼 前言概念与原理对比Redis-Cluster&#xff1a;基于哈希槽的分布式解决方案传统 Redis 集群&#xff1a;主从架构下的数据分片方式 搭建与配置的异同Redis-Cl…

面向对象的三大特征之二:继承 --java学习笔记

什么是继承? 关键字extends,用这个关键字&#xff0c;可以让一个类和另一个类建立起父子关系 继承的特点&#xff1a;子类能继承父类的非私有成员&#xff08;成员变量、成员方法&#xff09;继承后对象的创建&#xff1a;子类的对象时由子类、父类共同完成的 代码演示&am…

杨中科 ASP.NET Core 中的依赖注入的使用

ASP.NET CORE中服务注入的地方 1、在ASP.NET Core项目中一般不需要自己创建ServiceCollection、IServiceProvider。在Program.cs的builder.Build()之前向builderServices中注入 2、在Controller中可以通过构造方法注入服 务。 3、演示 新建一个calculator类 注入 新建TestC…

linux环境安装docker

一、Docker是什么? 当我们开发一个应用程序时&#xff0c;通常需要配置和安装各种软件、库和依赖项。而这些环境配置可能会因为不同的操作系统或版本而存在差异&#xff0c;导致应用在不同环境中运行出现问题。 Docker就像是一个集装箱&#xff0c;可以将应用程序及其所有依…

HTTP 3xx状态码:重定向的场景与区别

HTTP 状态码是服务器响应请求时传递给客户端的重要信息。3xx 系列的状态码主要与重定向有关&#xff0c;用于指示请求的资源已被移动到不同的位置&#xff0c;需要采取不同的操作来访问。 一、301 Moved Permanently 定义&#xff1a; 服务器表明请求的资源已永久移动到一个新…

读元宇宙改变一切笔记07_硬件与互操作性(上)

1. 元宇宙的头号入口 1.1. 元宇宙最令人兴奋的地方在于&#xff0c;我们可以借此开发用来访问、渲染和操纵它的新设备 1.1.1. App Newton于1993年发布&#xff0c;是世界上第一款掌上电脑 1.2. 功能超强大又轻巧的AR和沉浸式VR头显 1.2.1.…

让企业的招投标文件、生产工艺、流程配方、研发成果、公司计划、员工信息、客户信息等核心数据更安全。

PC端访问地址1&#xff1a;www.drhchina.com PC端访问地址2&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 全方位立体式防护  让数据泄密无处遁形 信息防泄漏是一项系统的整体部署工程&#xff0c;加密监控已成为多数企事业单…

RPA财务机器人在厦门市海沧医院财务管理流程优化汇总的应用RPA全球生态 2024-01-05 17:27 发表于河北

目前国内外研究人员对于RPA机器人在财务管理流程优化领域中的应用研究层出不穷&#xff0c;但现有研究成果主要集中在财务业务单一领域&#xff0c;缺乏财务管理整体流程一体化管控的研究。RPA机器人的功能绝非单一的财务业务处理&#xff0c;无论从自身技术发展&#xff0c;或…

anoconda 安装报错

表现形式&#xff1a;Output folder: D:\anoconda\Lib Extract: _nsis.py Extract: _system_path.py Output folder: D:\anoconda........................ 解决办法&#xff1a; 网址&#xff1a;Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Sour…

C语言实现俄罗斯方块游戏程序设计【附源码】

目录 一、前言 二、需求分析 2.1 产品需求概述 2.1.1 功能简介 2.1.2 运行环境 2.2 功能需求 2.2.1 绘制地图 2.2.2 生成随机方块 2.2.3 按键响应 2.2.4 预览方块 2.2.5 分数累加 三、概要设计 3.1 系统体系结构图 3.2 模块描述 四、详细设计 4.1 系统主要函数…

mysql进阶-重构表

目录 1. 原因 2. 如何重构表呢&#xff1f; 2.1 命令1&#xff1a; 2.2 命令2&#xff1a; 2.3 命令3&#xff1a; 1. 原因 正常的业务开发&#xff0c;为什么需要重构表呢&#xff1f; 原因1&#xff1a;某张表存在大量的新增和删除操作&#xff0c;导致表经历过大量的…

4.MapReduce 序列化

目录 概述序列化序列化反序例化java自带的两种Serializable非Serializable hadoop序例化实践 分片/InputFormat & InputSplit日志 结束 概述 序列化是分布式计算中很重要的一环境&#xff0c;好的序列化方式&#xff0c;可以大大减少分布式计算中&#xff0c;网络传输的数…

《向量数据库指南》让「引用」为 RAG 机器人回答增加可信度

在之前的文章中&#xff0c;我们已经介绍了如何用 Milvus 向量数据库以及 LlamaIndex 搭建基础的聊天机器人《Chat Towards Data Science &#xff5c;如何用个人数据知识库构建 RAG 聊天机器人&#xff1f;》《书接上回&#xff0c;如何用 LlamaIndex 搭建聊天机器人&#xff…

FlinkCDC的分析和应用代码

前言&#xff1a;原本想讲如何基于Flink实现定制化计算引擎的开发&#xff0c;并以FlinkCDC为例介绍&#xff1b;发现这两个在表达上不知以谁为主&#xff0c;所以先分析FlinkCDC的应用场景和技术实现原理&#xff0c;下一篇再去分析Flink能在哪些方面&#xff0c;做定制化计算…

个人网站制作 Part 4 添加响应式设计 | Web开发项目

文章目录 &#x1f469;‍&#x1f4bb; 基础Web开发练手项目系列&#xff1a;个人网站制作&#x1f680; 添加响应式设计&#x1f528;移动优先的响应式样式&#x1f527;步骤 1: 添加媒体查询 &#x1f528;图片和布局调整&#x1f527;步骤 2: 使用响应式图片&#x1f527;步…

vue3-计算属性

计算属性 模板中的表达式虽然方便&#xff0c;但也只能用来做简单的操作。如果在模板中写太多逻辑&#xff0c;会让模板变得臃肿&#xff0c;难以维护。 根据作者今年是否看过书展示不同信息 <script lang"ts" setup> import { ref, reactive } from "…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《与新能源互补和独立参加多级市场的抽蓄电站容量分配策略》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 这个标题涉及到抽蓄电站在能源系统中的角色&#xff0c;特别是在多级市场中的参与&#xff0c;并强调了新能源的互补性以及抽蓄电站的独立性。下面我将…