我有一个动态生成的英雄横幅,其标题为标题,然后是正文文本,下面是紧随英雄横幅底部上方的三张动作卡。
我的问题是,每当有英雄横幅带有较长的正文时,它就会在操作卡片后面运行,如下所示:
我尝试调整HeroText的下边距,但仍然落后于卡。我试图调整CardRow和HeroText,以使CardRow相对于有多少文本向下推,同时仍与底部的HeroImage重叠,但是我对如何做到这一点感到困惑。
我在这里添加了一个CodeSandbox:
并在此处包含我的所有代码:
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);
}
`;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句