react17 + antd4 如何实现Card组件与左侧内容对齐并撑满高度

在使用antd进行页面布局时,经常会遇到需要将内容区域进行左右分栏,并在右侧区域内放置一个或多个Card组件的情况。然而,有时我们会发现右侧的Card组件并不能与左侧的栏目对齐,尤其是当左侧栏目高度动态变化时。本文将介绍如何使用antd的Grid布局和CSS样式来实现Card组件与左侧内容对齐,并撑满剩余高度

1. 问题描述:

当我们在一个Row中放置两个Col,分别代表左侧内容和右侧内容,并在右侧的Col中放置一个Card组件时,可能会遇到以下问题:

  • 右侧的Card组件高度不足,无法与左侧的Col对齐。
  • 当左侧内容高度动态变化时,右侧的Card组件高度不会相应调整。

2. 解决方案:

1、确保包含左侧内容和右侧Card的Row具有足够的高度。

2、需要在右侧的Col中使用flex布局来撑开Card组件的高度。具体做法是为右侧的Col设置display: flex;flex-direction: column;,然后为Card组件所在的Row设置flex:1;display:flex;这样是为了保证该Row可以占据上下的空间,再给Card设置flex:1;。这样,Card组件就会自动填充右侧Col的剩余空间。

  • flex-direction: column;保证父级的直接子元素(两个 Row)将会沿着列方向排列.为了让包含Card的Row能够填充整个Col的剩余空间,就需要确保其父级Col的flex方向是垂直的。
  • flex:1;:常常用于确保 flex 容器中的项目能够均匀地分配容器中的空间,如果你希望 Card 组件或其他任何元素填充其父容器的剩余空间,你可以使用 flex: 1; 来实现这一点。

3、包含Card的Row中如果还有Col,也要给该Col加上flex:1;display:'flex';每一层都要保证能够填充父级的剩余高度。

4、Row和Col本身就是flex布局,还要重新设置flex布局,是因为在复杂的布局需求下,需要在它们内部再次使用 flex 布局来获得更精细的控制。
例如,需要把Col设置为一个flex容器,保证里面内容的垂直对齐或高度填充。

3. 案例

import React, { Component } from 'react'
import {Row,Col,Card} from 'antd'
export default class Index extends Component {render() {return (<div><Row gutter={12}><Col span={12}><Card style={{backgroundColor:'red'}}><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p></Card></Col>{/* 给右侧一列的Col开启flex布局,并垂直分布 */}<Col span={12} style={{display:'flex',flexDirection:'column'}}><Row><Col span={24}><Card style={{backgroundColor:'pink'}}><p>hello</p><p>hello</p><p>hello</p><p>hello</p></Card></Col></Row>{/* 给该行要设置flex:1;为了保证该行的内容占据剩余空间;再开启flex布局 */}<Row style={{flex:1,display:'flex'}}>{/* 同Row */}<Col span={24} style={{flex:1,display:'flex'}}><Card style={{backgroundColor:'blue',flex:'1'}}><p>hello</p><p>hello</p><p>hello</p><p>hello</p></Card></Col></Row></Col></Row></div>)}
}

在这里插入图片描述

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

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

相关文章

LeetCode-924. 尽量减少恶意软件的传播【深度优先搜索 广度优先搜索 并查集 图 哈希表】

LeetCode-924. 尽量减少恶意软件的传播【深度优先搜索 广度优先搜索 并查集 图 哈希表】 题目描述&#xff1a;解题思路一&#xff1a;解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给出了一个由 n 个节点组成的网络&#xff0c;用 n n 个邻接矩阵图…

IDEA 本地库引入了依赖但编译时找不到

在使用 IDEA 开发 Maven 项目的过程中&#xff0c;有时会遇到本地库引入了依赖&#xff0c;但编译时报找不到这个依赖&#xff0c;可以使用命令处理。 打开 Terminal。 执行清理命令。 mvn clean install -Dmaven.test.skiptrue执行更新命令。 mvn -U idea:idea

比肩世界一流的车企,长安汽车的这些做法也太超前了!

2023年12月&#xff0c;法大大发布了中国首部《汽车行业合同数智化白皮书》&#xff08;点击阅读及下载&#xff1a;中国首部&#xff01;《汽车行业合同数智化白皮书》重磅发布 | 附下载&#xff09;。该白皮书基于法大大自身参与汽车行业合同数智化建设的实践和思考&#xff…

volatile

volatile&#xff1a; 用来声明变量的关键字之一&#xff0c;它的主要作用是确保多个线程能够正确地处理共享变量。在多线程编程中&#xff0c;如果一个变量被多个线程共享并且这些线程可能同时修改该变量的值&#xff0c;那么就需要使用 volatile 关键字来保证线程之间对该变量…

算法打卡day35

今日任务&#xff1a; 1&#xff09;343. 整数拆分 2&#xff09;96.不同的二叉搜索树 3&#xff09;复习day11 343. 整数拆分 题目链接&#xff1a;343. 整数拆分 - 力扣&#xff08;LeetCode&#xff09; 给定一个正整数 n&#xff0c;将其拆分为至少两个正整数的和&#xf…

【kafka】安装

也是第二次安装&#xff0c;蛮记录一下 1.安装kafka之前需要先完成zookeeper的安装 【zookeeper】安装 2. Apache Kafka官网下载 3. 解压完成后修改server.properties配置文件 修改日志文件存放路径 查看与zookeeper连接的端口是否和zookeeper服务所在的端口一致 &#xf…

Transformer的Decoder的输入输出都是什么

目录 1 疑问&#xff1a;Transformer的Decoder的输入输出都是什么 2 推理时Transformer的Decoder的输入输出 2.1 推理过程中的Decoder输入输出 2.2 整体右移一位 3 训练时Decoder的输入 参考文献&#xff1a; 1 疑问&#xff1a;Transformer的Decoder的输入输出都是什么 …

小型燃气站3D可视化:打造安全高效的燃气新时代

随着科技的不断进步&#xff0c;越来越多的行业开始融入3D可视化技术&#xff0c;燃气行业也不例外。 小型燃气站作为城市燃气供应的重要节点&#xff0c;其安全性和运行效率至关重要。传统的燃气站管理方式往往依赖于人工巡检和纸质记录&#xff0c;这种方式不仅效率低下&…

【数据结构】树与二叉树、树与森林部分习题以及算法设计例题 2

目录 【数据结构】树与二叉树、树与森林部分习题以及算法设计例题一、交换二叉树每个结点的左右孩子Swap 函数&#xff08;先序遍历&#xff09;&#xff1a;Swap 函数&#xff08;中序遍历&#xff09; 不可行&#xff1a;Swap 函数&#xff08;后序遍历&#xff09;&#xff…

授权协议OAuth 2.0之JWT

写在前面 本文看下JWT相关内容。 1&#xff1a;为什么需要JWT OAuth2.0规范中并没有规定access_token使用什么样的格式&#xff0c;只要求满足&#xff0c;不连续性&#xff0c;不可猜测性&#xff0c;不可重复性就可以了&#xff0c;所以我们在生成accest_token的时候就比较…

Vue 3 性能飞跃:解析其性能提升的关键方面

文章目录 响应式系统优化静态树提升diff算法优化Tree Shaking优化Composition API事件缓存机制 响应式系统优化 Vue双向绑定原理 Proxy 相较于 Object.defineProperty 在性能上的优势主要体现在以下几个方面&#xff1a; 属性检测的全面覆盖&#xff1a; Object.defineProper…

解决 windows+Ubuntu 时间不同步问题

本文所使用的 Ubuntu 系统版本是 Ubuntu 22.04 ! 如果你的电脑装了 Windows Ubuntu 系统&#xff0c;肯定会遇到时间不同步的问题。那么如何解决呢&#xff1f;参考步骤如下&#xff1a; # 步骤一&#xff1a;进入到 Ubuntu 系统# 步骤二&#xff1a;执行如下三条命令即可 sud…

格雷希尔G80L-T系列大口径快速连接器,在汽车膨胀水箱的气密性测试密封方案

副水箱也有人称作膨胀水箱&#xff0c;是汽车散热系统的一个重要组成部分&#xff0c;当水箱里面的温度过高的时候就会产生一定的压力&#xff0c;而副水箱可以根据热胀冷缩来帮助水箱和发动机排出去多余的水&#xff0c;起到一个调节的作用&#xff0c;副水箱由PP/PE塑料注塑而…

c++ CUDA求解线性方程组Ax=b

输入是三个eigen矩阵, 其中 F K x F Kx FKx, 已知 F F F和 k k k, 待求解的变量是 x x x bool linearSolverQR(Eigen::MatrixXd& m_Keig, Eigen::MatrixXd& m_xeig, Eigen::MatrixXd& m_feig) {cusolverStatus_t status;// 获取矩阵数据的指针double* k_ptr m_…

spring高级篇(一)

1、ApplicationContext与BeanFactory BeanFactory是ApplicationContext的父级接口&#xff1a;&#xff08;citlaltu查看类关系图&#xff09; 在springboot的启动类中&#xff0c;我们通过SpringApplication.run方法拿到的是继承了ApplicationContext的ConfigurableApplicatio…

代码随想录-算法训练营day13【栈与队列03:滑动窗口最大值、前K个高频元素、简化路径、总结】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第五章 栈与队列part03今日内容&#xff1a; ● 239. 滑动窗口最大值 ● 347.前 K 个高频元素 ● 总结详细布置 239. 滑动窗口最大值 &#xff08;一刷至少需要理解思路&#xff09;之前讲的都是栈的应用&#xff0c;这…

Qt使用miniblink第三方浏览器模块

文章目录 一、前言二、miniblink简介三、miniblink使用四、运行效果五、工程结构 一、前言 本文取自刘典武大师&#xff1a;Qt编写地图综合应用58-兼容多浏览器内核 用Qt做项目过程中&#xff0c;遇到需要用到浏览器控件的项目&#xff0c;可能都会绕不开一个问题&#xff0c;那…

【Web】VS Code 插件

专栏文章索引&#xff1a;Web 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、安装步骤 二、插件 1.Chinese (Simplified) (简体中文) 2.open in browser 3.vscode-icons 4.Live Server 5.Live Server Preview 6.翻译(英汉词典) 一、安装步骤 点击 “扩…

创纪录的里程碑!光镊阵列捕获逾6,000中性原子,量子计算再达新高

论文链接&#xff1a; https://arxiv.org/abs/2403.12021 2024年3月18日&#xff0c;研究人员成功开发出一种大规模光镊阵列&#xff0c;能够在12,000个位点上捕获超过6,100个中性原子&#xff0c;同时在几个关键性能指标上达到新的高度&#xff1a; 1&#xff09;相干时间达到…

javascript设计模式----访问者模式

访问者模式:针对于对象结构中的元素,定义在不改变改对象的前提下访问结构中元素的新方法。 解决事件回调函数中对改元素的访问问题。 实现的核心,调用call或者apply 场景:用dom2级事件为页面中的元素绑定事件 var bindEvent = function(dom,type,fn){if(dom.addEventListe…