如何在相同高度的材质ui中水平放置卡片答案

【问题标题】：how to place cards horizontally in material ui with same height如何在相同高度的材质ui中水平放置卡片
【发布时间】：2021-06-02 00:59:27
【问题描述】：

我是材料 ui 的新手。我希望图像中的所有这些卡片都具有相同的高度，但无法做到：/ 如何制作相同高度的卡片？我已经尝试将高度 100% 添加到卡片组件仍然没有运气这是我的代码

News.js


  const useStyles = makeStyles({
    fullHeightCard: {
        height: "100%",
    },
  });
const News = (props) => {
  const { title, description,urlToImage } = props.articles;
  const classes = useStyles();
  return (
  <Container fixed>
    <Card className={classes.fullHeightCard} >
      <CardActionArea>
      <CardMedia
          component="img"
          alt="Contemplative Reptile"
          height="100%"
          image={urlToImage}
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
    </Container>
    
  );
};

export default News;

【问题讨论】：

标签： reactjs material-ui react-material

【解决方案1】：

我认为不可能，因为您的卡片内容不同，或者您必须将最长卡片的高度设置为所有其他卡片的高度

【讨论】：

【解决方案2】：

您可以将此道具添加到您的课程中：

fullHeightCard: {
    minHeight: "100px",
},

【讨论】：

你也可以使用maxHeight，以确保它适合。