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

Posted 2023-02-22

【中文标题】Material UI 卡片内容高度/卡片内容固定到底部

【英文标题】：Material UI card content height/cardcontent fixed to bottom

【发布时间】：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),
  ,
));

【参考方案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。