CSS用于在每行的每张小卡片下方显示全宽卡片

Question

我有一个场景，其中我设计了3列/多行的行卡。当用户单击任何卡片时，将在该行下面显示一个全宽卡片，其中包含更多详细信息。根据我的CSS，全宽卡片显示在行的正下方。但我对此有疑问。

当我单击第一张小卡片时，全宽数据显示在该行的正下方，但该行中的其他卡片移到该行的下方。下图将更清晰地描述。

​

​

Answer 1

您可以在每个正常行的下面添加一行额外的行长卡片。在这些额外的行中，您可以包括3个具有额外详细信息的行长卡片，所有这些卡片都不会正常显示。然后，当点击每个卡片时，可以显示该卡片的对应的行长卡片。

这只是如何解决这个问题的一个例子。我希望这能帮到你。