vue -ant -design 卡片是布局 实现动态计算 当前的 左右间距 实现居中

是这样的一个样式 我们使用display :flex 布局的时候 我们全部剧中 

display: flex;align-items: center;justify-content: center;

如果是上述的代码来说的话 总是最后的一个也是会居中的 这样就比较丑

我们好像就没有什么好的办法了 我们这自己写的 肯定没有组件牛 如果有这样的组件 那就直接用如果没有组件呢怎么实现呢

解决方案

1.计算每个item 的宽度

2.计算 整个box 的宽度 除去 padding margin 等以后的宽度

3. 使用box 的宽度 减去所有的item加起来的宽度 以及设置的item的margin 等 

剩下的宽度就是左右margin 

给box 设置当前的margin-left 就可以了

这个是一个开发中的解决问题的思路

具体怎么做 肯定要看自己的项目业务逻辑了

这是我计算当前margin 的方法

还有就是肯定是要监听当前的视图改变的

这个不能够100% 解决这个问题 当你拖动resize 不能够百分百解决适配 但是无伤大雅 

基本上是能适配大部分的电脑屏幕和笔记本 

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

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

相关文章

三十六篇:未来架构师之道:掌握现代信息系统典型架构

未来架构师之道:掌握现代信息系统典型架构 1. 引言 在企业的数字化转型浪潮中,信息系统架构的角色变得日益重要。它不仅承载了企业的IT战略,更是确保企业在复杂、动态的市场环境中稳定运行的关键。作为信息系统的骨架,一个精心设…

hash和history路由模式的区别

在 Web 前端开发中,history和hash是两种不同的页面导航和路由管理技术。 Hash (hash routing): Hash 路由是通过 URL 中的哈希符号(#)后面的部分来改变页面状态的。例如,http://example.com/#/home 和 http://example.…

Linux环境在非root用户中搭建(java-tomcat-redis)

注: 本文在内网(离线)环境,堡垒机中搭建,服务器不同可能有所差异,仅供参考 本文安装JDK-20.0.1版本,apache-tomcat-10.1.10版本,redis-6.2.15版本 本文服务器IP假设:192.168.88.133 root用户创建子用户并…

web应用防火墙的功能特性

网络层防护 HTTP/HTTPS Flood(CC 攻击)防护 应用层防护 黑白名单 对指定访问源加白名单,对恶意访问来源进行封禁。 支持 IP、URL、Useragent(用户代理)、Referer(Http 访问来源)。 HTTP协议规…

人工智能对话系统源码 手机版+电脑版二合一 全端支持 前后端分离 带完整的安装代码包以及搭建部署教程

系统概述 该系统采用前后端分离的设计模式,前端负责用户界面展示与交互,后端负责数据处理与业务逻辑实现。前后端通过API接口进行通信,实现数据的实时传输与处理。系统支持全端访问,无论是手机还是电脑,都能获得良好的…

u盘内容无故消失了是什么原因?u盘部分内容无故消失了怎么恢复

在数字化时代,U盘作为便携存储设备,承载着许多重要的数据。然而,有时我们可能会遭遇U盘部分内容无故消失的情况,这无疑给我们的工作和生活带来了不小的困扰。本文将为您解析U盘内容消失的可能原因,并分享几招实用的数据…

重生奇迹MU格斗家技能

格斗家有9个技能,其中幽冥青狼拳.斗气爆裂拳.神圣气旋.这3个是武器上带的技能。 回旋踢.幽冥光速拳.炎龙拳.这3个是买羊皮纸学的技能(回旋踢是格斗最强技能)。 还有3个给自己加BUFF的技能,斗神破(增加无视防御的状态&…

自动化测试学习之路:从零到资深工程师

对于那些希望从零开始学习自动化测试的人,以下是我建议的学习路径: 一、基础准备 了解软件测试的基本概念:首先,你需要了解软件测试的基本定义、目的和重要性。明确软件测试与软件开发的紧密关系,以及为何自动化测试…

【LC刷题】DAY02:24 19 142

【LC刷题】DAY02:24 19 142 文章目录 【LC刷题】DAY02:24 19 14224. 两两交换链表中的节点 [link](https://leetcode.cn/problems/swap-nodes-in-pairs/description/)19.删除链表的倒数第N个节点 [link](https://leetcode.cn/problems/remove-nth-node-f…

C++ 环形链表(解决约瑟夫问题)

约瑟夫问题描述: 编号为 1 到 n 的 n 个人围成一圈。从编号为 1 的人开始报数,报到 m 的人离开。下一个人继续从 1 开始报数。n-1 轮结束以后,只剩下一个人,问最后留下的这个人编号是多少? 约瑟夫问题例子:…

评估聚类效果

本关任务 本关实现准确度评估函数,来评估聚类算法的效果。 相关知识 在前三个关卡中,我们学习了 K-measn 聚类算法中,三个比较关键的组成部分,包括欧几里得距离计算公式、找出每个样本的最近邻簇中心和重新计算每个簇的聚类中心…

移动端 UI 风格,视觉盛宴

移动端 UI 风格,视觉盛宴

JavaScript 类和对象 创建对象的四种方式 操作对象 操作对象 删除属性 修改属性 查看属性值 遍历对象 对象数组

类和对象 什么是对象? 现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、 一个与远程服务器的连接也可以是 “对象…

linux常用命令及其选项

1、常用命令 1.1、ls 选项说明-a显示所有文件及目录 (包括隐藏文件)-i显示inode-A同 -a选项 ,但不列出 "." (目前目录) 及 ".." (父目录)-l列出信息详细(如文件型态、权限、拥有者、文件大小等)-R递归显示(若目录下有文件,则以下之…

ug8四轴编程怎么编程:深入解析与实战指南

ug8四轴编程怎么编程:深入解析与实战指南 ug8四轴编程,作为现代数控机床编程技术的重要分支,其复杂性和精度要求使得许多初学者和工程师感到困惑。本文将围绕ug8四轴编程的核心要点,从四个方面、五个方面、六个方面和七个方面展开…

从零手写实现 nginx-12-keepalive HTTP 持久连接或连接复用

前言 大家好,我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的,可以参考我的另一个项目: 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

htb_office

端口扫描 namp -sSVC 10.10.11.1380,445 80端口 robots.txt 只有/administrator可以访问 Joomla joomscan扫描 joomscan --url http://10.10.11.3/ 版本为4.2.7,存在cve CVE-2023-23752 Joomla未授权访问Rest API漏洞 访问路径 /api/index.php/…

使用OpenCV dnn c++加载YOLOv8生成的onnx文件进行实例分割

在网上下载了60多幅包含西瓜和冬瓜的图像组成melon数据集,使用 EISeg 工具进行标注,然后使用 eiseg2yolov8 脚本将.json文件转换成YOLOv8支持的.txt文件,并自动生成YOLOv8支持的目录结构,包括melon.yaml文件,其内容如下…

Linux宝塔部署数据库连接问题

博主在部署项目时发现网页可以成功部署,但是登录界面一直登录不进去推测是数据库连接问题。 博主当时在IDEA中写的是用户名为root 密码123456 但是在宝塔中因为自己是跟着教程学的所以就顺手把用户名和密码都改了,于是java中的配置和数据库配置连接不上…

利用streamlit结合langchain_aws实现claud3的页面交互

测试使用的代码如下 import streamlit as st from langchain_aws import ChatBedrockdef chat_with_model(prompt, model_id):llm ChatBedrock(credentials_profile_name"default", model_idmodel_id, region_name"us-east-1")res llm.invoke(prompt)re…