Material UI 卡片内容高度/卡片内容固定到底部答案

【问题标题】：Material UI card content height/cardcontent fixed to bottomMaterial UI 卡片内容高度/卡片内容固定到底部
【发布时间】：2020-07-20 21:26:35
【问题描述】：

我目前正在映射从 JSON 对象获取信息的材料 UI 卡，因此其中的信息会不时变化并占用不同的空间。我希望我完成的每张卡片都有一个固定的高度，但是内容不符合要求。

A screenshot of how it looks

我把所有的卡片都排成三排。如您所见，最后一张卡片的内容与其他两张不一致。我想将按钮和图形固定在卡片的底部，或者甚至为图形上方的内容设置一个固定的高度，以便图形和按钮位于底部。我一直在努力让它发挥作用。任何帮助将不胜感激。

这是我的代码：

<Grid key={item.Qid} item xs={12} sm={4}>
  <Card className={classes.cards}>
    <div className={classes.details}>
      <CardContent>
        <Typography component="h5" variant="h5" align="center">
          Question
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Qid}
        </Typography>
        <Typography variant="subtitle1" color="textSecondary">
          {item.Question}
        </Typography>
        <Typography component="h5" variant="h5" align="center" className={classes.space}>
          Sentiment
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Sentiment}
        </Typography>
      </CardContent>

      <CardMedia className={classes.cover}>
        {item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
      </CardMedia>

      <div align="center" className={classes.space}>
        <Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
          Answers
        </Button>
      </div>
    </div>
  </Card>
</Grid>;

这用于样式：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  cards: {
    padding: theme.spacing(2),
    height: "95%",
  },
  details: {
    display: "flex",
    flexDirection: "column",
  },
  space: {
    marginTop: theme.spacing(1),
  },
}));

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

给你一个解决方案

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  cards: {
    padding: theme.spacing(2),
    height: "95%",
  },
  details: {
    display: "flex",
    flexDirection: "column",
  },
  space: {
    marginTop: theme.spacing(1),
  },
  question: {
    overflow: "hidden",
    display: "-webkit-box",
    WebkitLineClamp: 2,
    WebkitBoxOrient: "vertical"
  }
}));

<Grid key={item.Qid} item xs={12} sm={4}>
  <Card className={classes.cards}>
    <div className={classes.details}>
      <CardContent>
        <Typography component="h5" variant="h5" align="center">
          Question
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Qid}
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" className={classes.question}>
          {item.Question}
        </Typography>
        <Typography component="h5" variant="h5" align="center" className={classes.space}>
          Sentiment
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Sentiment}
        </Typography>
      </CardContent>

      <CardMedia className={classes.cover}>
        {item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
      </CardMedia>

      <div align="center" className={classes.space}>
        <Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
          Answers
        </Button>
      </div>
    </div>
  </Card>
</Grid>;

question 类会将行数限制为 2。

【讨论】：