时间戳

首页 > 解决方案 > 材质 UI 中的相同高度卡片

css - 材质 UI 中的相同高度卡片

问题描述

尝试使用 3 张水平卡片但高度相同并且反应灵敏。

喜欢

卡 A | 卡 B | 卡 C

标签： cssmaterial-ui

解决方案

您可以使用 Grid 组件来实现此目的：

<Grid container alignItems="stretch">

  <Grid item component={Card} xs>
    <CardContent>
       // Card A content
    </CardContent>
    <CardActions>
      // Card A actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>
</Grid>

alignItems="stretch"（您实际上不需要指定，因为拉伸是默认值）当 flex 方向为row（这也是默认方向）时，将具有拉伸每个项目的高度的效果。您可以查看此答案以获取更多详细信息：https ://stackoverflow.com/a/46956430/253693

each 上的xs属性Grid item利用auto-layout，指示每张卡片平均共享可用宽度。

还有一些你可以解决的清理项目，即使用withStyles HOC将一个类应用于每个固定间距的 Card 组件，并确保 CardActions 保持在卡片的底部，无论 CardContent 的高度如何：

const styles = {
  card: {
    // Provide some spacing between cards
    margin: 16,

    // Use flex layout with column direction for components in the card
    // (CardContent and CardActions)
    display: "flex",
    flexDirection: "column",

    // Justify the content so that CardContent will always be at the top of the card,
    // and CardActions will be at the bottom
    justifyContent: "space-between"
  }
};

然后，您可以将这些样式应用于每张卡片，如下所示：

<Grid item component={Card} xs className={classes.card}>

这是一个将所有内容组合在一起的工作示例：https ://codesandbox.io/embed/r9y95vr5n

推荐阅读