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

news2024/11/24 10:49:52

是这样的一个样式 我们使用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.coloradmin.cn/o/1807187.html

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

相关文章

【Redis学习笔记04】Jedis客户端(上)

Java客户端操作Redis Java生态丰富,自定义的客户端非常多,常见的有Jedis、Lettuce、以及Spring整合后的RedisTemplate,但是对于初学者而言,从Jedis开始入门学习是非常容易上手的,因为Jedis中的API与原生Redis命令高度…

基于栅格占据概率和距离场的机器人覆盖轨迹模拟

基于栅格占据概率和距离场的机器人覆盖轨迹模拟 简介 辐射场模型实现 理论基础 指数函数建模 我们使用指数函数来表示机器人在某个栅格上停留时间对覆盖概率的影响: p ( t ) 1 − e − λ t p(t) 1 - e^{-\lambda t} p(t)1−e−λt 其中 λ \lambda λ 是控制增长速率…

java线程相关知识点

Java多线程涉及以下几个关键点 1.线程生命周期:理解线程从创建到销毁的各个阶段,包括新建、运行、阻塞、等待、计时等待和终止。 2.线程同步:掌握如何使用synchronized关键字和Lock接口来同步代码,防止数据竞争和死锁。 3.线程间通…

vivado HW_DEVICE

硬件设备 描述 在Vivado Design Suite的硬件管理器功能中,每个硬件目标都可以 具有一个或多个Xilinx FPGA设备进行编程或用于调试目的。这个 hw_device对象是通过hw_server打开的hw_target上的物理部分。这个 current_hw_device命令指定或返回当前设备。 相关对象 硬…

Linux系统编程(十二)线程同步、锁、条件变量、信号量

线程同步: 协同步调,对公共区域数据按序访问。防止数据混乱,产生与时间有关的错误。数据混乱的原因 一、互斥锁/互斥量mutex 1. 建议锁(协同锁): 公共数据进行保护。所有线程【应该】在访问公共数据前先拿…

Vue3 + TS + Antd + Pinia 从零搭建后台系统(一) 脚手架搭建 + 入口配置

简易后台系统搭建开启,分几篇文章更新,本篇主要先搭架子,配置入口文件等目录 效果图一、搭建脚手架:二、处理package.json基础需要的依赖及运行脚本三、创建环境运行文件四、填充vue.config.ts配置文件五、配置vite-env.d.ts使项目…

微服务开发与实战Day04 - 网关路由和配置

一、网关路由 网关&#xff1a;就是网络的关口&#xff0c;负责请求的路由、转发、身份校验。 在SpringCloud中网关的实现包括两种&#xff1a; 1. 快速入门 Spring Cloud Gateway 步骤&#xff1a; ①新建hm-gateway模块 ②引入依赖pom.xml(hm-gateway) <?xml version…

【python】OpenCV GUI——Trackbar(14.2)

学习来自 OpenCV基础&#xff08;12&#xff09;OpenCV GUI中的鼠标和滑动条 文章目录 GUI 滑条介绍cv2.createTrackbar 介绍牛刀小试 GUI 滑条介绍 GUI滑动条是一种直观且快速的调节控件&#xff0c;主要用于改变一个数值或相对值。以下是关于GUI滑动条的详细介绍&#xff1a…

course-nlp——6-rnn-english-numbers

本文参考自https://github.com/fastai/course-nlp。 使用 RNN 预测数字的英文单词版本 在上一课中&#xff0c;我们将 RNN 用作语言模型的一部分。今天&#xff0c;我们将深入了解 RNN 是什么以及它们如何工作。我们将使用尝试预测数字的英文单词版本的问题来实现这一点。 让…

Llama模型家族之Stanford NLP ReFT源代码探索 (三)reft_model.py代码解析

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

C# WPF入门学习主线篇(十七)—— UniformGrid布局容器

C# WPF入门学习主线篇&#xff08;十七&#xff09;—— UniformGrid布局容器 欢迎来到C# WPF入门学习系列的第十七篇。在前几篇文章中&#xff0c;我们已经探讨了 Canvas、StackPanel、WrapPanel、DockPanel 和 Grid 布局容器及其使用方法。本篇博客将介绍另一种非常实用且简单…

推荐三款你不知道的良心软件

Tico——抠图、拼图软件 抠图软件大家见过很多了把&#xff0c;但是从多张图片中抠出来的图片拼接成一张图片你们很少见过吧。 Tico就是一款将抠出来的图片拼接成一张新图片的软件&#xff0c;目前仅支持IOS平台。 Tico拼贴图提供了强大的图像编辑和处理功能&#xff0c;用户…

预期值与实际值对比

编辑实际值和预期值变量 因为在单独的代码当中&#xff0c;我们先定义了变量str&#xff0c;所以在matcher时传入str参数&#xff0c;但当我们要把这串代码写在testrun当中&#xff0c;改下传入的参数&#xff0c;与excel表做连接 匹配的结果是excel表中的expect结果&#xf…

整型变量、赋值语句、cin 语句

1、变量&#xff1a; 在程序运行期间其值可以改变的量称为变量。变量是代码中最重要的元素。每个变量应该有一个名字&#xff0c;同一个程序内的变量名不重复。 请注意区分变量名和变量值这两个不同的概念&#xff08;相当于张三的名字和他本人是不同的概念一样&#xff09;。…

入门matlab

常识 如何建一个新文件 创建新文件&#xff0c;点击新建&#xff0c;我们就可以开始写代码了 为什么要在代码开头加入clear 假如我们有2个文件&#xff0c;第一个文件里面给x赋值100&#xff0c;第二个文件为输出x 依次运行&#xff1a; 结果输出100&#xff0c;这是因为它们…

elasticsearch安装与使用(1)-使用docker安装Elasticsearch

ES的优点&#xff1a; 1、分布式准实时2、提供REST风格的API接口&#xff0c;是用户可解借助任何语言使用https对ES执行请求来完成搜索任务&#xff1b;3、提供聚合功能 1、Elasticsearch安装 docker network create elastic docker pull docker.elastic.co/elasticsearch/e…

MySQL 与 PostgreSQL 关键对比二(SQL语法)

目录 1 详细示例 1.1自动增量列 1.2 字符串连接 1.3 JSON 支持 2 总结 MySQL 和 PostgreSQL 是两种流行的开源关系数据库管理系统&#xff08;RDBMS&#xff09;。尽管它们在许多方面相似&#xff0c;但在 SQL 语法和功能上存在一些显著差异。 以下SQL语句的执行如果需要开…

Redis系列-5 Redis分布式锁

背景&#xff1a; 本文介绍Redis分布式锁的内容&#xff0c;包括Redis相关命令和Lua脚本的介绍&#xff0c;以及操作分布式锁的流程与消息&#xff0c;最后结合Redission源码介绍分布式锁的实现原理。 1.基本命令 1.1 基本键值对的设置 设值: set key value 取值: get key …

深度网络及经典网络简介

深度网络及经典网络简介 导语加深网络一个更深的CNN提高识别精度Data Augmentation 层的加深 经典网络VGGGoogLeNetResNet 高速学习迁移学习GPU分布式学习计算位缩减 强化学习总结参考文献 导语 深度学习简单来说&#xff0c;就是加深了层数的神经网络&#xff0c;前面已经提到…

独立游戏《星尘异变》UE5 C++程序开发日志4——实现任务系统

目录 一、任务的数据结构 二、任务栏 三、随机事件奖励 1.随机事件的结构 2.随机事件池的初始化 3.生成随机事件 本游戏作为工厂游戏&#xff0c;任务系统的主要功能就是给玩家生产的目标和动力&#xff0c;也就是给玩家发布一个需要一定数量某星尘的订单&#xff0c;玩家…