不同长度描述的卡片错位
Cards with different length descriptions are misaligned
我有一个来自 Sematic-UI-react 的 <Card.Group>
。我有几行描述长度不同的卡片,这导致每张卡片的高度与行中的其他卡片不对齐。我尝试在每张卡片上设置 <Card style={{ height: "100%" }}>
并使用 flex:1
但这会将所有卡片放在同一行中。
我有一个链接的沙箱 here。
我也会post下面的相关代码
<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>
在 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>
我有一个来自 Sematic-UI-react 的 <Card.Group>
。我有几行描述长度不同的卡片,这导致每张卡片的高度与行中的其他卡片不对齐。我尝试在每张卡片上设置 <Card style={{ height: "100%" }}>
并使用 flex:1
但这会将所有卡片放在同一行中。
我有一个链接的沙箱 here。
我也会post下面的相关代码
<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>
在 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>