长度描述不一致的卡片未对齐

Question

我有一个来自Sematic-UI-react的。我有几行具有不同描述长度的卡片，这导致每张卡片的高度与行中的其他卡片不对齐。我尝试在每张卡上设置<Card style={{ height: "100%" }}>并使用flex:1，但这会导致所有的卡都排在同一行。

我有一个链接的沙盒here。

我也将在下面发布相关代码

 <Card.Group itemsPerRow={3}>
    <Card fluid color="blue" style={{ height: "100%" }}>
      <Card.Content header="Elliot" textAlign="center" />
      <Card.Content description="Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat. Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat. Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat." />
      <ExtraContentAccordion
        content="Extra content for card #0"
        onToggle={toggleCard(0)}
        open={state[0]}
      />
    </Card>
    <Card color="red" style={{ height: "100%" }}>
      <Card.Content header="Elliot" textAlign="center" />
      <Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
      <ExtraContentAccordion
        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac commodo diam, et tincidunt massa. Sed aliquet tortor purus, in pulvinar enim mattis ac. Maecenas vestibulum cursus lorem, quis fermentum enim lacinia a. Ut nec feugiat nisl. Morbi finibus hendrerit diam, id iaculis nibh feugiat sed. Sed non justo turpis. Fusce neque quam, facilisis eu aliquam vitae, hendrerit nec nulla. Integer metus sapien, dictum eget viverra et, dictum in lectus. Integer vitae dolor ut libero dictum tristique eget non nunc. Suspendisse diam urna, pretium sed elementum sed, fermentum eu leo. Donec augue tortor, rhoncus id pulvinar ac, fringilla eu est. Duis et ante tristique dui molestie maximus at ut enim. Curabitur facilisis tempor lorem quis scelerisque. Maecenas enim leo, mollis at egestas in, vulputate eget risus."
        onToggle={toggleCard(1)}
        open={state[1]}
      />
    </Card>{" "}
    <Card color="blue" style={{ height: "100%" }}>
      <Card.Content header="Elliot" textAlign="center" />
      <Card.Content description="'Elliotying guitar and hanging with his cat.'" />
      <ExtraContentAccordion
        content="Extra content for card #2"
        onToggle={toggleCard(2)}
        open={state[2]}
      />
    </Card>{" "}
    <Card color="blue" style={{ height: "100%" }}>
      <Card.Content header="Elliot" textAlign="center" />
      <Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
      <ExtraContentAccordion
        content="Extra content for card #3"
        onToggle={toggleCard(3)}
        open={state[3]}
      />
    </Card>{" "}
    <Card color="blue" style={{ height: "100%" }}>
      <Card.Content header="Elliot" textAlign="center" />
      <Card.Content description="'Elliot is ville who enjoys playing guitar and hanging with his cat.'" />
      <ExtraContentAccordion
        content="Extra content for card #4"
        onToggle={toggleCard(4)}
        open={state[4]}
      />
    </Card>{" "}
    <Card color="blue" style={{ height: "100%" }}>
      <Card.Content header="Elliot" textAlign="center" />
      <Card.Content description="'Elliot is a sound engineer living in Nashville  Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.who enjoys playing guitar and hanging with his cat.'" />
      <ExtraContentAccordion
        content="Extra content for card #5"
        onToggle={toggleCard(5)}
        open={state[5]}
      />
    </Card>{" "}
  </Card.Group>

Answer 1

将Card.Group组件上的显示设置为flex。现在，在父Card组件中，我们将赋予它一个alignSelf: "flex-start"样式，这样当另一个卡片展开时，各个卡片就不会拉伸。

请参阅沙盒：https://codesandbox.io/s/semantic-ui-card-extra-content-toggle-dimkm

  <Card.Group itemsPerRow={3} style={{ display: "flex" }}>
    <Card fluid color="blue" style={{ alignSelf: "flex-start" }}>
      <Card.Content
        header="Elliot"
        textAlign="center"
        style={{ maxHeight: "45px" }}
      />
      <Card.Content
        style={{ flex: "1", minHeight: "275px" }}
        description="Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat. Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat. Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat."
      />
      <ExtraContentAccordion
        content="Extra content for card #0"
        onToggle={toggleCard(0)}
        open={state[0]}
      />
    </Card>