【问题标题】: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。

有什么想法吗?

问候, 安迪

【问题讨论】:

  • 我还注意到,如果我使用 DIV 标签而不是离子卡,也会发生同样的事情。

标签: ionic4


【解决方案1】:

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-10-09
    • 1970-01-01
    • 2020-07-10
    • 1970-01-01
    • 2019-01-22
    • 2020-05-29
    • 1970-01-01
    • 2017-08-29
    相关资源
    最近更新 更多