Question

我希望网格中的所有卡都具有相同的高度。我一直在尝试使用chrome几个小时，测试各种组合，但无法达到预期的效果。我希望卡的内容部分（粉红色）扩展，以便所有内容都在同一行中。

网格单元是完美的。但是，如果我弯曲使卡片长大或将其设置为100％的高度，它将用纸（图2）填充网格项（如图1所示）。我对所有孩子（尤其是文本区域）执行了相同的操作，但是它们不会扩展。

尝试拉伸，更改显示，高度等。不惜一切代价避免固定高度（甚至取决于视口）或固定最大高度。有任何想法吗？

编辑：也许值得一提的是，我最接近期望结果的地方是在display: content子元素上设置CardActionArea。 Card完全符合我的要求，只是它将我的文字放在底部。

这是我的样式和我的第一张卡片的代码-我将在注释中显示一些经过尝试和测试的内容（某些代码也无关紧要，但是如果有破坏，我将保留它我正在尝试做的事情）：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  grid: {}, //grid works exactly as I want it
  gridItem: {
    [theme.breakpoints.up("md")]: {
      padding: "32px !important"
    }
    // display: "flex",
    // flexDirection: "column",
    // justifyContent: "space-between",
    // alignItems: "stretch"
    // [theme.breakpoints.down("sm")]: {
    //   padding: theme.spacing(0)
    // }
  },
  card: {
    "&:hover": {
      boxShadow:
        "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(255, 255, 255, 0.23)",
      // margin: "-10px auto 0",
      // transform: "scale(1.01)",
      // boxShadow: "-6px 4px 3px rgba(38, 38, 38, 0.2)",
      // top: "-4px",
      transition: ["boxShadow", "margin"],
      transitionDuration: 300
    },
    display: "flex",
    flexFlow: "column"
    // flexDirection: "column",
    // justifyContent: "space-between",
    // alignItems: "stretch",
    // height: "100%"

    // maxWidth: "300px",
    // maxHeight: 345
    // boxShadow:
    //   "10px 10px 5px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.43)"
    // display: "block",
    // width: "100%",
  },
  media: {
    height: "auto",
    width: "100%",
    objectFit: "cover"
    // margin: "-70px auto 0",
    // width: "80%",
    // height: 140,
    // borderRadius: "4px",
    // boxShadow: "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)",
    // position: "relative",
    // zIndex: 1000
  },
  content: {
    background: "linear-gradient(to right, #ee9ca7, #ffdde1)",
    padding: "10px",
    flexGrow: 1
    // display: "flex"
    // flexDirection: "column",
    // justifyContent: "space-between",
    // alignItems: "stretch",
    // height: "100%"
  },
  contHead: {
    color: "black",
    marginBottom: "3px"
  },
  contText: {
    color: "black"
  },
  buttonArea: {
    background: "linear-gradient(to right, #000000, #434343)",

    // display: "flex", //card has flex by default
    flexFlow: "wrap",
    justifyContent: "center",
    padding: "0"
  },
  buttons: {
    // backgroundColor: "white",
    padding: "0",
    minHeight: "29px",
    marginLeft: "0 !important",
    marginTop: "5px",
    marginBottom: "5px"
  },
  icons: { color: "white", fontSize: "1.8rem" },
  iconsTBA: { color: "#9c7e82", fontSize: "1.3rem" },
  toolTips: {
    // backgroundColor: "#f5f5f9",
    backgroundColor: "rgba(0, 0, 0, 1)",
    maxWidth: 350,
    // // maxHeight: 100,
    fontSize: theme.typography.pxToRem(14),
    // border: "1px solid #dadde9",
    // // transform: "translate(100px, 200px) rotate(50deg)"
    // // transform: "translate(50%,90%)"
    // marginLeft: "23vw",
    // marginTop: "90vh",
    [theme.breakpoints.down("sm")]: {
      marginBottom: "35vh"
    }
  },
  toolTipsCard: {
    fontSize: theme.typography.pxToRem(20)
  }
}));

//Tooltip info
const rpgTT = "test";

const Games = () => {
  const classes = useStyles();

  return (
    <div className="full-container-2">
      <div className={classes.root}>
        <Grid className={classes.grid} container spacing={3}>
          <Grid className={classes.gridItem} item xs={12} sm={6} md={4} lg={4}>
            <Card className={classes.card}>
              <Tooltip
                classes={{ tooltip: classes.toolTipsCard }}
                TransitionComponent={Zoom}
                title="Play"
                placement="top"
              >
                <CardActionArea>
                  <CardMedia className={classes.media} image={pic1} />
                  <CardContent className={classes.content}>
                    <Typography
                      className={classes.contHead}
                      gutterBottom
                      variant="h5"
                      component="h2"
                    >
                      Game Title
                    </Typography>
                    <Typography
                      className={classes.contText}
                      variant="body2"
                      color="textSecondary"
                      component="p"
                    >
                      This is a small string
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Tooltip>
              <CardActions className={classes.buttonArea}>
                <Button className={classes.buttons}>
                  <FontAwesomeIcon
                    title="Not Available Yet"
                    className={classes.iconsTBA}
                    icon={faWindows}
                  />
                </Button>
                <Button className={classes.buttons}>
                  <FontAwesomeIcon
                    title="Not Available Yet"
                    className={classes.iconsTBA}
                    icon={faLinux}
                  />
                </Button>
                <Button className={classes.buttons}>
                  <FontAwesomeIcon className={classes.icons} icon={faGithub} />
                </Button>

                <Tooltip
                  classes={{ tooltip: classes.toolTips }}
                  TransitionComponent={Zoom}
                  title={rpgTT}
                  placement="bottom"
                >
                  <Button className={classes.buttons}>
                    <FontAwesomeIcon
                      className={classes.icons}
                      icon={faInfoCircle}
                    />
                  </Button>
                </Tooltip>
              </CardActions>
            </Card>
          </Grid>

Answer 1

为每张卡添加一个弹性框，并在信息面板上添加一个flex-grow: 1：

.grid{
   display:grid;
       grid-template-columns: 1fr 1fr;
}

.card {
    display: flex;
    flex-flow: column;
    margin-right: 10px;
}

.card img{
 width: 100%;
}

.card .info{
  background-color: pink;
  flex-grow: 1;
}

<div class="grid">
  <div class="card">
    <img src="http://placekitten.com/200/200" />
    <div class="info">
       <h1>Title</h1>
       <p>Text</p>
    </div>
  </div>
  <div class="card">
    <img src="http://placekitten.com/200/200" />
    <div class="info">
       <h1>Title</h1>
       <p>Text</p>
       <p>Text</p>
       <p>Text</p>
    </div>
  </div>

</div>

Answer 2

试图以一种非常简单的方式实现通缉卡行为，希望对您有所帮助：

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
    border: 4px solid #827d7d;
    border-radius: 5px;
    margin: 8px;
    display: flex;
    flex-direction: column;
}

.card_header {
  background-color: grey;
}

.card_content {
  background-color: yellow;
  height: 100%;
}

h1, p {
  margin: 0;
}

<div class="container">
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm diffirent amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm diffirent amount of content</p>
      <p>I'm diffirent amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm diffirent amount of content</p>
      <p>I'm diffirent amount of content</p>
      <p>I'm diffirent amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm diffirent amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm diffirent amount of content</p>
      <p>I'm diffirent amount of content</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card_header">
      <h1>I'm header</h1>
    </div>
    <div class="card_content">
      <p>I'm diffirent amount of content</p>
      <p>I'm diffirent amount of content</p>
      <p>I'm diffirent amount of content</p>
    </div>
  </div>
</div>

Answer 3

找到了罪魁祸首。是CardActionArea（卡的子组件，它可以单击并包含MUI的波纹效果）。

只有当该区域具有以下所有属性，从而使内容适合该区域时，才能实现所需的结果：

flexGrow: 1,
display: "flex",
flexDirection: "column",
alignItems: "stretch"

感谢大家进行讨论，帮助我更好地解决了问题，并开始逐一注释卡的子元素，然后发现了问题。干杯！

无法将我的网格卡内容设置为相等的高度

3 个答案: