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战略,更是确保企业在复杂、动态的市场环境中稳定运行的关键。作为信息系统的骨架,一个精心设…

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

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

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

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

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

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

重生奇迹MU格斗家技能

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

移动端 UI 风格,视觉盛宴

移动端 UI 风格,视觉盛宴

linux常用命令及其选项

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

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…

mathtype最新注册码下载2024最新分享地址

数学公式编辑器MathType,让在线教育更“数”利 在当今这个数字化、信息化飞速发展的时代,无论是学术研究、教育教学还是日常工作中,都离不开对各种复杂公式的输入与编辑。特别是对于教育工作者和科研工作者而言,如何高效准确地输入…

C++开源项目:pathcopycopyV20源码及运行程序

PathCopyCopy 是一个开源的 Windows 资源管理器扩展项目,旨在为用户提供一个更加高效、便捷的文件路径复制和管理工具。以下是关于 PathCopyCopy 开源项目的详细介绍: 1. 项目概述 2. 项目技术分析 3. 项目功能 4. 项目特点 5. 项目应用场景 6. 项目…

8. C#多线程基础概念

文章目录 一. 目标二. 技能介绍① 进程和线程② 为什么需要多线程③ C#实现多线程的方式④ 线程的操作(创建_终止_挂起_恢复) 一. 目标 进程和线程基本概念为什么需要多线程?C#实现多线程的方式?线程Thread的创建,终止,挂起和恢复? 二. 技能介绍 ① 进程和线程 什么是进程…

计网总结☞物理层

五层协议体系结构->各层的功能有: 物理层 物理层的任务就是尽可能地屏蔽传输媒体的差异,透明地传送比特流(注意:传递信息的物理媒体,如双绞线、同轴电缆、光缆等,是在物理层的下面,当做第 0…

Python AI 编程助手:Fitten Code插件

一. 简介 今天为大家推荐一款适配了 Viusal Studio,VS Code(本文使用),JetBrains 系列(本文使用)以及Vim等多种编译器环境的插件 Fitten Code,Fitten Code 是由非十大模型驱动的 AI 编程助手,它可以自动生成代码,提升…

【AIGC】基于大模型+知识库的Code Review实践

一、背景描述 一句话介绍就是:基于开源大模型 知识库的 Code Review 实践,类似一个代码评审助手(CR Copilot)。信息安全合规问题:公司内代码直接调 ChatGPT / Claude 会有安全/合规问题,为了使用 ChatGPT…

STM32F103C8开发板 STM32最小系统核心板 AD硬件原理图+PCB封装文件分享

STM32F103C8开发板原理图 原理图和PCB下载地址: STM32F103C8开发板 STM32最小系统核心板 AD硬件原理图PCB封装文件.zip: https://url83.ctfile.com/f/45573183-1269573020-8f85b2?p7526 (访问密码: 7526)

Bio-Info 每日一题:Rosalind-04-Rabbits and Recurrence Relations

🎉 进入生物信息学的世界,与Rosalind一起探索吧!🧬 Rosalind是一个在线平台,专为学习和实践生物信息学而设计。该平台提供了一系列循序渐进的编程挑战,帮助用户从基础到高级掌握生物信息学知识。无论你是初…

指针在C/C++中的魔力:一级指针与二级指针

什么是指针? 指针是一个变量,它的值是另一个变量的地址。在C/C中,指针是一个强大的工具,可以让我们直接操作内存地址。指针的主要用途包括动态内存分配、数组和字符串处理、函数参数传递等。 一级指针 一级指针(也称为…