包含离子卡的 Ionic 4 离子载玻片 - 布局问题答案

【问题标题】：Ionic 4 ion-slide containing ion-cards - layout issue包含离子卡的 Ionic 4 离子载玻片 - 布局问题
【发布时间】：2020-05-16 07:07:52
【问题描述】：

我正在尝试让幻灯片在每张幻灯片中都有许多卡片的情况下工作。

我创建了一个 stackblitz 来展示我的问题：https://stackblitz.com/edit/ion-slides-info-zgej2j

通常情况下，卡片是垂直堆叠的，在每张卡片中，标题位于内容之上。

但在幻灯片中执行此操作会将卡片、标题和内容移动到水平行中。有关示例，请参见 Stackblitz。

有什么想法吗？

问候，安迪

【问题讨论】：

标签： ionic4

【解决方案1】：

啊，我已经解决了。 ion-slide 内的所有内容必须被一个元素包裹，而不是同一层的多个元素。

所以基本上，有多个离子卡，并将它们插入一个 div：

<ion-slide>
    <div>
        <ion-card />
        <ion-card />
        <ion-card />
    </div>
</ion-slide>

【讨论】：