2

我正在尝试在 Vuetify 中创建一个带有卡片的响应式网格。每张卡片的大小必须相同,但如果我在其下添加长文本(第二张卡片),卡片始终是最大大小(我也使用断点制作,但 Vuetify 只有 5 个断点,我需要更多。我可以为每一列添加一个自定义断点,但这有点难看)。

最后一行也必须像下面的草图一样向左对齐。我尝试了很多东西,但我想使用最小宽度和最大宽度,所以在大多数情况下,卡片之间的间隙是相同的。它应该看起来像这样:

预览 - 卡片网格

这是我的代码笔

4

1 回答 1

0

那些文本太长的卡片不会调整大小,因为它们无法识别父宽度,因此卡片宽度就会变为最大值。我通过给他绝对值来解决这个问题,并用一些 css 修复了它。最后的对齐我通过添加空白透明卡来修复,这样它们就可以正确对齐。这是codepen中的解决方案

于 2020-10-23T12:54:16.363 回答