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

Question

我有一个场景，我设计了多行的 3 个列/行卡。当用户单击任何卡片时，全宽卡片将显示在该行下方，并提供更多详细信息。根据我的 CSS，全宽卡片显示在该行的正下方。但我有这个问题。

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

Answer 1

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

这只是如何解决此问题的一个示例。我希望这会有所帮助。