如何对齐不同行中的卡片
对齐不同行中的卡片可以通过以下几种方式实现：
- 使用CSS布局：可以通过设置卡片的display属性为inline-block或flex，并使用相关的布局属性（如justify-content、align-items等）来控制卡片在不同行中的对齐方式。
- 使用栅格系统：栅格系统是一种常用的响应式布局方式，可以将页面划分为等宽的列，通过将卡片放置在不同的列中来实现对齐。常见的栅格系统有Bootstrap的栅格系统（https://getbootstrap.com/docs/5.0/layout/grid/）和Ant Design的栅格系统（https://ant.design/components/grid-cn/）。
- 使用CSS网格布局：CSS网格布局是一种强大的布局方式，可以通过定义网格容器和网格项来实现对齐。可以使用grid-template-columns和grid-template-rows属性来定义网格的列数和行数，使用grid-column和grid-row属性来指定卡片所占的列数和行数。
- 使用JavaScript库：如果需要更复杂的对齐方式，可以使用一些JavaScript库来实现，如Masonry（https://masonry.desandro.com/）和Isotope（https://isotope.metafizzy.co/）。这些库可以根据卡片的大小和位置自动调整布局，实现不同行中的卡片对齐。
总结起来，对齐不同行中的卡片可以通过CSS布局、栅格系统、CSS网格布局和JavaScript库等方式来实现。具体选择哪种方式取决于项目需求和个人偏好。
相关·内容
1回答
如何对齐不同行中的卡片
、、、
我正在尝试这样做：<div class="columns"> <div每个元素都有自己的卡片。但这会将它们全部打印在同一行上。大小不一。
浏览 1提问于2017-07-01得票数 0
1回答
调整反应卡的高度而不包括折叠
、、、、
这些都列在React卡片中，这些卡片都支持展开/折叠-展开卡片并显示更多信息。expand中显示的信息在大小和信息上会有所不同，我不希望卡片在扩展时调整高度。当它们折叠时高度是对齐的，但我不确定当卡片展开时如何不调整它们。示例： ? 此图像显示了卡片高度如何与内容最多的卡片对齐。这正是我想要的行为
浏览 16提问于2021-01-11得票数 2
所以基本上，我只用HTML和CSS做了一个非常简单的网站。我有这3张卡片，它们都有自己的<a>父元素，因为我希望无论你在卡片的什么地方点击它们，它们都是可点击的。然后，所有这些元素都包装在一个名为cards的div标记中 在添加元素上的锚标签之前，我只在CSS文件中的cards类上使用flexbox将所有卡片居中。到目前为止，所有的卡片都在同一条线上，
浏览 22提问于2020-07-27得票数 3
回答已采纳
2回答
我不担心卡片的感觉，但我更关心的是风景是如何建造的。我正在考虑使用一个适配器，它返回与该行对应的不同布局。但正如您所看到的，这两个视图都包含与彼此无关的信息。有可能有一个具有不同行适配器的ListView吗？
或者如何使用自定义视图来实现这一点？
浏览 4提问于2013-12-18得票数 3
回答已采纳
我想在页面中央显示一张卡片。当我将类progress-wizard放在一个单独的div中时，如下所示。important;这样，第二个div不继承父div的高度，并且卡片不会居中对齐。我想知道flex layout是如何工作的，以及正确的解决方案？
谢谢。
浏览 51提问于2017-10-21得票数 3
我正在编写Java代码，以便使用POI库解析复杂的excel。电子表格的一部分如下所示我的理解是，POI不知道来自不同行的单元格之间的关系，即单元格在一列中如何对齐。例如，在图片中，我如何让代码判断有三个单元格与CD3在同一列中，而CD4下只有两个单元格？CD的数量不固定，每张CD下的密度列的数量也不</em
浏览 3提问于2015-07-30得票数 0
我有大量的卡片，我需要在一个vGrid中显示。然而，卡片有动态高度，我想要做的是让卡片在列中与顶部对齐。这是当前的设置： }
.padding(.horizontal, Constants.ItemsGrid.pa
浏览 25提问于2022-05-10得票数 6
回答已采纳
在我的反应应用程序中，我试图对每张卡片的标题、图像和描述进行排列。以下是当前显示的方式：卡内的每个孩子都没有正确地对齐。是我的代码的链接。下面是我希望它显示的方式：如何对齐每张卡片的内容？
浏览 4提问于2022-08-09得票数 0
1回答
我正在尝试在Vuetify中创建一个带有卡片的响应式网格。每张卡必须是相同的大小，但如果我在它下面添加一个长文本(第二张卡)，卡总是最大的大小(我也用breakpoints做了这一点，但Vuetify只有5个断点，我会更需要它。我可以为每一列添加一个自定义断点，但这是一个有点丑陋的解决方案)。 另外，最后一行必须向左对齐，如下图所示。我尝试了很多东西，但我想使用最小宽度和最大宽度，这样在大多数情况下，卡片之间的间隙将是相同的<
浏览 22提问于2020-10-22得票数 2
回答已采纳
3回答
如何使以下元素居中： <div class="inner"> <div<div class="cards card3">Card 3</div>
<div class="cards card4">Card 4</
浏览 0提问于2019-03-16得票数 2
1回答
对齐列- Flexbox
、、、、
我目前使用的是从基金会构建的XY网格中的grid-x，尽管当我使用grid-padding-x进行卡片布局(如下所示)时，可以看到卡片居中(这很棒)，尽管我想在上面放置一个排序栏，但将其与下面的卡片布局对齐被证明是困难的，因为卡片布局会相应地进行调整。我希望在jsfiddle中显示的是固定宽度和高度的卡片，并自动居中(通过使用grid-padding实现)，但我希
浏览 1提问于2017-09-19得票数 0
1回答
在游戏中对齐牌阵列
、、、、
我正在创建一个tcg (交易纸牌游戏)，我想知道如何在玩的时候改变纸牌的布局。我的意思是，卡片将在画布上垂直和水平地与屏幕中心对齐，当我绘制/解散一张卡片时，我希望卡片填充空间，并在游戏中再次对齐。我想到了一个解决方案，关于什么时候轮到你(从屏幕的中心开始，然后后退一步的长度X牌的数量/2，然后一个接一个地产生牌)，但我不知道如何改变一张牌<e
浏览 0提问于2017-04-15得票数 0
2回答
因为拖放卡片，我使用jQueryUI。如中所示，您可以将卡片拖到纸牌游戏中堆叠卡片的列中。
问题来了。假设我把所有三张卡片都堆放在一列里:卡片1，卡片2和卡片3互相叠在一起。为了实现这一点，我已经尝试过让每一张后继卡都成为上一张卡的一个孩子。不幸的是，这种方法会导致大量的DOM操作，并且拖放不能像预期的那样工作。当我将一张卡片移动到一个无效<em
浏览 11提问于2014-07-28得票数 0
回答已采纳
我使用React Masonry插件来对齐卡片我知道使用jQuery可以使用reload
浏览 4提问于2015-12-22得票数 4
2回答
如何使这两个(如图所示)以这种方式在卡片上浮动(稍微从卡片的边框对齐)。这是小部件代码
卡片(形状: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20)，)，标高: 3，//颜色: Colors.orange
浏览 4提问于2021-01-03得票数 2
回答已采纳
1回答
我使用Birt列表元素从左到右显示我的数据。(请参阅作为参考)。例如：列表元素，其中的网格在详细信息中，网格设置为内联。我现在面临的问题是，网格中的不同行不是从左到右对齐的(可能是因为一些行在某些字段中具有空值)。如何强制BIRT正确对齐？对于换行超过1行的较长文本，这也是一个问题。换行的/multiple行应该由“输出行”<
浏览 1提问于2016-10-31得票数 0
1回答
这与ng-zorro中nz-card的使用有关。 我正在尝试对齐卡片主体内的样式操作按钮，但没有成功。 我希望卡片的高度是相同的，所以从视觉上看，所有are的底部边框是垂直对齐的。按钮位于每张卡片的底部。 示例位于：https://stackblitz.com/edit/angular-py7awb 希望使用泛型是一种标准<
浏览 123提问于2019-10-16得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
