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

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

2.display:flex; flex:1;width:100px;

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.mzph.cn/news/61268.shtml

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

相关文章

安防视频监控/视频集中存储/云存储平台EasyCVR平台无法取消共享通道该如何解决?

视频汇聚/视频云存储/集中存储/视频监控管理平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,实现视频资源的鉴权管理、按需调阅、全网分发、云存储、智能分析等,视频智能分析平台EasyCVR融合性强、开放度…

智慧景区方案:AI与视频融合技术如何助力景区监管智能化升级?

随着经济的发展,人们对生活的需求也不再局限于温饱层面,越来越多的人们开始追求文化、艺术的高层次需求,旅游也逐渐成为人们日常放松的一种方式。由于我国人口多、易扎堆等特点,景区的运营监管方式也亟需改革。TSINGSEE青犀智能分…

ssm计算机网络课程试卷生成器系统源码

ssm计算机网络课程试卷生成器系统源码099 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 技术:ssm package com.controller;import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Arrays;…

OPENCV实现SURF特征检测

1、SURF优点:SIFT速度慢,一次出现了SURF;2、使用SURF步骤:surf = cv2.xfeatures2d.SURF_create()kp,des = surf.detectAndComputer(img,mask)# -*- coding:utf-8 -*- """ 作者:794919561 日期:2023/8/31 """# -*-

Linux脚本- 执行当前文件下前500个.c文件,并将每个文件对应的执行结果重定向到同名的.ok文件中

需求:执行当前文件下前500个.c文件,并将每个文件对应的执行结果重定向到同名的.ok文件中 以下是一个用于实现该功能的 Bash 脚本。 #!/bin/bash# 计数器,用于限制处理的文件数量 counter0# 遍历当前目录下的所有 .c 文件 for c_file in *.c…

uni-app 编译报错 Error: pages.json解析失败,不符合 json 规范Unexpected token ‘)‘

问题 使用webstorm开发项目时,打开pages.json习惯性ctrlaltl把代码格式了,然后报错了。 接着使用HBuilder编译,但是一直显示在编译中,完全没有反映。重启编译器与重启电脑都没有用。 没管然后编译报错了。 加上逗号再运行还是报…

Uniapp新版本打包后覆盖安装,新增的页面无法跳转,需退出重新启动才可以打开的解决方案

最近写uniapp项目,发现一个坑,在新版本覆盖安装后直接打开APP,新增的页面竟然无法跳转,需要重新启动才可以正常打开,在网上查了很多方法,最终总结下来有以下几点: 1.看打的是debug包还是releas…

Android 之 LayoutInflater (布局服务)

本节引言: 本节继续带来的是Android系统服务中的LayoutInflater(布局服务),说到布局,大家第一时间 可能想起的是写完一个布局的xml,然后调用Activity的setContentView()加载布局,然后把他显示 到屏幕上是吧~其实这个底…

会话跟踪技术

cookie 是通过在浏览器第一次请求服务器时,在响应中放入cookie,浏览器接收到cookie后保存在本地,之后每次请求服务器时都将cookie携带到请求头中,用来验证用户身份与状态等。 缺点: 移动端app没有cookiecookie保存在…

11月考PMP的考生注意了,请尽快完成英文报名!

PMP 项目管理专业人士资格认证,是经由美国项目管理协会(PMI)发起,组织的考试,目的是为了给项目管理人员提供统一的行业标准,严格评估项目管理人员知识技能是否具有高品质的资格认证考试。 免费送备考资料。…

直播电商系统源码:搭建属于你自己的直播商城

​ 感谢您选择一一零七科技有限公司,在这里,我们致力于为您提供最佳的商城解决方案。我们引以为豪的产品之一就是独立商城,它将成为您拓展业务、增加盈利的利器。今天,我们将向您介绍这个令人激动的产品,同时展示我们的…

input时间表单默认样式修改(input[type=“date“])

一、时间选择的种类: HTML代码&#xff1a; <input type"date" value"2018-11-15" />选择日期&#xff1a; 选择时间&#xff1a; <input type"time" value"22:52" />在这里插入图片描述 选择星期&#xff1a; <…

JavaScript—数据类型、对象与构造方法

js是什么&#xff1f; JavaScript&#xff08;简称“JS”&#xff09; 是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言&#xff0c;并且支持面向对象、命令式、声明式、函数式编程范式。 js有哪些特点呢…

Java类的声明周期、对象的创建过程

一、类的生命周期 使用类时&#xff0c;要先使用类加载器将类的字节码从磁盘加载到内存的方法区中&#xff0c;用Class对象表示加载到内存中的类&#xff0c;Class类是JDK中提供的类创建对象时&#xff0c;是根据内存中的Class对象&#xff0c;在堆中分配内存&#xff0c;完成…

Servlet与过滤器

目录 Servlet 过滤器 Servlet Servlet做了什么 本身不做任何业务处理,只是接收请求并决定调用哪个JavaBean去处理请求,确定用哪个页面来显示处理返回的数据 Servlet是什么 ServerApplet&#xff0c;是一种服务器端的Java应用程序 只有当一个服务器端的程序使用了Servlet…

网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞 附POC

文章目录 网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞 附POC1. 网御ACM上网行为管理系统简介2.漏洞描述3.影响版本4.fofa查询语句5.漏洞复现6.POC&EXP7.整改意见8.往期回顾 网御ACM上网行为管理系统bottomframe.cgi接口存在SQL注入漏洞 附POC 免责声明&am…

自然语言处理(NLP)是什么?

NLP(自然语言处理) 和 Phoebe Liu 的简介 您有没有和聊天机器人互动过&#xff1f;或者您是否向虚拟助手&#xff0c;例如 Siri、Alexa 或您车上的车载娱乐系统发出过某些请求&#xff1f;您使用过在线翻译吗&#xff1f;我们大多数人都曾与这些人工智能 (AI) 互动过&#xff…

自步学习的介绍 self paced learning

这方面的研究专家&#xff0c;参考西安交通大学的 孟德宇老师 他最近的研究方向&#xff1a; Fundamental problems in machine learning and computer vision, especially including: Meta-learning Variational bayesian methods on inverse problems Robust and interpret…

ELK安装、部署、调试(三)zookeeper安装,配置

1.准备 java安装&#xff0c;系统自带即可 2.下载zookeeper zookeeper.apache.org上可以下载 tar -zxvf apache-zookeeper-3.7.1-bin.tar.gz -C /usr/local mv apache-zookeeper-3.7.1-bin zookeeper 3.配置zookeeper mv zoo_sample.cfg zoo.cfg /usr/local/zookeeper/con…

匿名内部类、Lambda、方法引用 的总结

在今天的项目中看到这样一行代码 Integer syncCount consumer.consumerInfo( Collections.singletonList(KafkaTopicConst.Event_BMS_SYSLOG_ROLE),consumer::handle); 直接傻眼&#xff0c;无法理解consumer::handle这种用法&#xff0c;因此总结如下 consumer::handle这种写…