当文本部分过长时,动态生成的英雄横幅文本在3个动作卡下方运行,尝试添加样式以防止重叠

乔希

我有一个动态生成的英雄横幅,其标题为标题,然后是正文文本,下面是紧随英雄横幅底部上方的三张动作卡。

我的问题是,每当有英雄横幅带有较长的正文时,它就会在操作卡片后面运行,如下所示:

在此处输入图片说明

我尝试调整HeroText的下边距,但仍然落后于卡。我试图调整CardRow和HeroText,以使CardRow相对于有多少文本向下推,同时仍与底部的HeroImage重叠,但是我对如何做到这一点感到困惑。

我在这里添加了一个CodeSandbox:

编辑奇妙的莱特-tmgnu

并在此处包含我的所有代码:

import "./styles.css";
import styled from "styled-components";

export default function App() {
  return (
    <ContentContainer>
      <Container>
        <HeroElement>
          <HeroTitle>
            Modern competitive gaming with a huge nostalgic past built with
            traders and collectors in mind.
          </HeroTitle>
          <HeroText>
            Pokem ipsum dolor sit amet Seel Buizel Walrein Ditto Liepard
            Charmeleon. Flamethrower Staryu Nidoqueen Pallet Town Breloom
            Forretress Weepinbell. Sand-Attack Mienshao Slugma Slaking Luxio
            Rage Jesse. Grass Zigzagoon Hippopotas incididunt ut labore Magby
            Jesse Pokemon Heroes. Zephyr Badge Staravia Hitmontop Sharpedo
            Pidgeotto Venipede Gothitelle. Wing Attack Combusken Gothorita
            Zoroark Venusaur Haunter Sceptile. Pikachu Cascoon Rotom Whirlipede
            Cloyster.
          </HeroText>
        </HeroElement>
        <CardRowContainer>
          <Card>
            <CardTitle>More Information</CardTitle>
            <CardText>
              Get more information on your favorite Pokemon here
            </CardText>
            <ButtonContainer>
              <Icon></Icon>
            </ButtonContainer>
          </Card>
          <Card>
            <CardTitle>Team Leader Boards</CardTitle>
            <CardText>
              Check out the top Pokemon Go and Pokemon TCG players from around
              the world
            </CardText>
            <ButtonContainer>
              <Icon></Icon>
            </ButtonContainer>
          </Card>
          <Card>
            <CardTitle>TCG Catalog</CardTitle>
            <CardText>
              Request an exclusive catalog of limited edition and rare cards
              only available through The Pokemon Company!
            </CardText>
            <ButtonContainer>
              <Icon></Icon>
            </ButtonContainer>
          </Card>
        </CardRowContainer>
      </Container>
    </ContentContainer>
  );
}

const ContentContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  * {
    box-sizing: border-box;
  }
`;

const HeroElement = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 400px;
  background: url(https://cdn5.qutee.com/wp-content/uploads/2016/06/heroUpload_433864841.jpg)
    0% 0% / cover no-repeat;
  background-repeat: no-repeat;
`;

const HeroTitle = styled.h1`
  font-size: 48px;
  font-weight: 400;
  margin: 48px auto 17px;
  color: white;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  text-align: center;
`;

const HeroText = styled.div`
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  margin: 0px auto auto;
  color: white;
  width: 400px;
  display: block;
`;

const CardRowContainer = styled.div`
  display: flex;
  margin: -128px auto 22px;
  columns: auto 3;
  column-gap: 20px;
  padding: 0px 20px;
`;

const Card = styled.div`
  background: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  cursor: pointer;
  margin: 0px 0px 20px;
  border-left: 4px solid rgb(217, 90, 90);
  padding: 20px 20px 15px;
  box-shadow: rgb(52 62 71 / 12%) 0px 3px 5px;
`;

const CardTitle = styled.div`
  font-size: 18px;
  margin: 0px auto 8px 0px;
`;

const CardText = styled.div`
  font-size: 14px;
  line-height: 20px;
  margin: 0px auto 8px 0px;
`;

const ButtonContainer = styled.div`
  border-radius: 100%;
  background-color: rgb(217, 90, 90);
  width: 40px;
  height: 40px;
  margin: auto auto 0px 0px;
`;

const Icon = styled.i`
  display: inline-block;
  margin: 12.5px 12.5px;
  font-size: 12px;
  width: 0.8rem;
  right: 0.8rem;
  height: 0.8rem;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  ::after {
    content: "";
    position: absolute;
    border-top: 2px solid white;
    top: 2px;
    right: -7px;
    width: 14px;
    height: 14px;
    transform: rotate(-45deg);
  }
`;

编辑测试删除负边距属性并添加后,position: relative我失去了底部卡行的预期覆盖效果:在此处输入图片说明

库纳尔·潘查尔

在调试代码时,我发现卡的边距属性为负

在此处输入图片说明

正如您所看到的结构。

  1. 卡包装器将移动到附加了动态说明的位置。
  2. 样式:在同一元素上添加position: relative;和删除margin: -(value);

希望这对您有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章