css让多个盒子强制自动等宽

1.width: calc( 100 / n+'‘%" )

2.display:flex; flex:1;width:100px;(width是几都行 只要保证一样就可以 会自动等分)

3.display:grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

但是其中某一个内容较长的时候 会破坏1:1:1的平衡 

 这个时候发现附件名字过长导致不等比例,通过查看阮一峰flex文档

Flex 布局教程:语法篇 - 阮一峰的网络日志

flex:1==flex-shrink:1;flex-grow:flex-basis:auto(实际查看浏览器的值为1)

flex-shrink 空间不足按比例缩小 flex-grow 空间过多按比例分配 flex-basis 分配主轴空间 

可以flex:1的同时增加width:100px;(width是几都行只要保证一样宽就行)

flex原理:所有孩子都是固定100px 剩下的都会等比分配过多或者过少的空间。跟孩子的内容宽度无关。

grid布局同理:列的宽度为 100px,但是会自动适应容器的宽度,并且每列的宽度平分剩余的空间

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

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

相关文章

Linux的命令

Linux的命令分为四个类型:文件操作命令、系统操作命令、文本处理命令和网络操作命令。下面简单介绍一下常用的Linux命令: 文件操作命令 ls:列出目录下的所有文件和目录。 cd:切换当前目录。 mkdir:创建一个新目录。…

skywalking springgateway 全链路

环境 spring-cloud-gateway 3.1.0 springGateway整合skywalking skywalking 默认是不整合springGateway的,需要手动拷贝skywalking optional-plugins下的 apm-spring-cloud-gateway-N.x-plugin-8.13.0.jar 和 apm-spring-webflux-5.x-plugin-8.13.0.jar 架包拷贝到plugins目…

【Python】爬虫练习-爬取豆瓣网电影评论用户的观影习惯数据

目录 前言 一、配置环境 1.1、 安装Python 1.2、 安装Requests库和BeautifulSoup库 1.3.、安装Matplotlib 二、登录豆瓣网(重点) 2.1、获取代理 2.2、测试代理ip是否可用 2.3、设置大量请求头随机使用 2.4、登录豆瓣网 三、爬取某一部热门电影…

Arcmap操作系列:面数据提取DEM/DSM中的高程点

1.背景 面数据需要高程数据做体模型,原有的面数据没有高程数据,所以需要再dem数据上提取高度值赋给面数据 2.操作 2.1将面数据转线数据 【数据管理工具】--【要素】--【要素转线】 2.2线数据转点数据 【数据管理工具】--【要素】--【要素转点】 同…

【Element】Vue+Element表单校验详解

Element表单校验 作为一个后端开发,总结一下实际工作中表单校验的场景和用法。 Element官网:https://element.eleme.cn/#/zh-CN/component/form 代码地址:https://gitee.com/kkmy/kw-microservices/tree/master/kw-ui/kwsphere 常用表单校验场…

vue3 搭配ElementPlus做基础表单校验 自定义表单校验

<script setup> import { ref, reactive } from vue// 表单元素 const dom ref(null) // 校验规则 const rules {name: [{ required: true, message: 请输入活动名称, trigger: blur }],//校验手机号格式phone: [{ required: true, message: "请输入电话", t…

Jenkins详解(三)

Jenkins详解(三) 目录 Jenkins详解(三) 1、Jenkins介绍2、Jenkins CI/CD 流程3、部署环境 3.1 环境准备3.2 安装GitLab3.3 初始化GitLab3.4 GitLab中文社区版补丁包安装3.5 修改GitLab配置文件/etc/gitlab/gitlab.rb3.6 在宿主机输入 http://192.168.200.26:88 地址就可以访问了…

FreeRTOS操作系统中,断言输出 Error:..\..\FreeRTOS\portable\RVDS\ARM_CM4F\port.c,766 原因

分析&#xff1a;Error:..\..\FreeRTOS\portable\RVDS\ARM_CM4F\port.c,766 出现这个原因表示&#xff0c;你现在系统某个中断的优先级高于FreeRTOS可管理的优先级范围&#xff0c;一旦你这个中断触发&#xff0c;断言的信息即你串口就会输出这个条语句&#xff08;前提你串口…

LiveNVR监控流媒体Onvif/RTSP功能-支持数据库切换为高斯数据库信创瀚高数据信创数据库

LiveNVR监控流媒体Onvif/RTSP支持数据库切换为高斯数据库信创瀚高数据信创数据库 1、如何配置切换高斯数据库&#xff1f;2、如何配置切换信创瀚高数据库&#xff1f;3、RTSP/HLS/FLV/RTMP拉流Onvif流媒体服务 1、如何配置切换高斯数据库&#xff1f; livenvr.ini -> [db]下…

W5500-EVB-PICO进行MQTT连接订阅发布教程(十二)

前言 上一章我们用开发板通过SNTP协议获取网络协议&#xff0c;本章我们介绍一下开发板通过配置MQTT连接到服务器上&#xff0c;并且订阅和发布消息。 什么是MQTT&#xff1f; MQTT是一种轻量级的消息传输协议&#xff0c;旨在物联网&#xff08;IoT&#xff09;应用中实现设备…

港陆证券:五日线破位怎么看?

在股票交易中&#xff0c;五日线是个重要的技术指标之一&#xff0c;它能够反映出最近的商场趋势。假如五日线破位&#xff0c;这意味着商场呈现了趋势反转&#xff0c;出资者需求注重趋势改动&#xff0c;并采取相应的出资战略。 首先&#xff0c;咱们来看看五日线破位的原因…

一文讲透:erp系统是什么?

erp系统是什么&#xff1f;这个看似简单的问题还真不好解答。因为现在99%的人都把ERP“系统”和ERP“软件”混淆了&#xff01; ERP原本主要是专注于制造业的信息化问题&#xff0c;我把它叫真正的ERP“系统”。 但现在基本上只要是一个软件系统都可以叫ERP系统&#xff0c;什…