学习了一些 CSS 和 Flexbox 之后,我正在尝试构建一个 Landing 宣传册网站。在构建一个的过程中,我遇到了一个我无法独自解决的问题。 我试图通过让
Col
元素或 Row
元素延伸来删除紫色虚线区域。尽管付出了努力,紫色虚线区域并没有消失。我应该添加一些 CSS 吗?我希望通过填充它来使其看起来有点居中对齐。由于存在多个依赖项,我无法在代码片段上运行代码,但我希望屏幕截图能有所帮助。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import { IoIosFlash } from "react-icons/io";
import styled from "styled-components";
import studyImg from "../../../asset/casual-life-3d-reading.png";
const heroColor = ({ theme }) => theme.colors.blueberry;
const navyColor = ({ theme }) => theme.colors.navy;
const whiteColor = ({ theme }) => theme.colors.white;
const data = {
heroMessage: "Memorize and Learn like thunder",
CTAMessage:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
CTAButtonText: "Get Started",
};
const HeroSection = styled.div`
padding: 160px 0;
background: ${heroColor};
height: 60vh;
`;
const HeroContainer = styled.div`
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: stretch;
flex-wrap: wrap;
`;
const Row = styled.div`
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: stretch;
`;
const Col = styled.div`
margin-bottom: 15px;
padding-right: 15px;
padding-left: 15px;
flex: 1;
max-width: 50%;
flex-basis: 50%;
`;
const HeroTextWrapper = styled.div`
max-width: 540px;
padding-top: 0;
padding-bottom: 60px;
`;
const HeroImageWrapper = styled.div`
max-width: 555px;
`;
const HeroMessage = styled.h1`
color: ${whiteColor};
font-size: 60px;
margin-bottom: 30px;
`;
const HeroImage = styled.img`
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
border: 0;
max-width: 100%;
vertical-align: middle;
display: inline-block;
`;
const CTAMessage = styled.h4`
color: ${whiteColor};
margin-bottom: 50px;
`;
const CTAWrapper = styled.div``;
const CTAButton = styled.button`
background: transparent;
color: ${whiteColor};
font-size: 14px;
border-color: ${whiteColor};
border-style: solid;
border-width: 2px;
border-radius: 22px;
padding: 10px 40px;
text-transform: uppercase;
transition: all 0.2s linear;
&:hover {
background: ${navyColor};
cursor: pointer;
border-color: ${navyColor};
transition: all 0.2s linear;
}
`;
const Wave = styled.svg`
stroke-opacity: 0;
`;
const WavePath = styled.path`
fill: ${heroColor};
`;
function Hero() {
return (
<>
<HeroSection>
<HeroContainer>
<Row>
<Col>
<HeroTextWrapper>
<HeroMessage>
{data.heroMessage}
<IoIosFlash color="yellow" />
</HeroMessage>
<CTAWrapper>
<CTAMessage>{data.CTAMessage}</CTAMessage>
<CTAButton>{data.CTAButtonText}</CTAButton>
</CTAWrapper>
</HeroTextWrapper>
</Col>
<Col>
<HeroImageWrapper>
<HeroImage src={studyImg} alt="Study Image" />
</HeroImageWrapper>
</Col>
</Row>
</HeroContainer>
</HeroSection>
<Wave viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<WavePath d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"></WavePath>
</Wave>
</>
);
}
export default Hero;
所以这里有几个解决方案:
width: 100%
制作这个容器,这样容器将占据父容器的所有空间,并且不会有任何紫色的东西。justify-content: center
,这样子节点将位于中心,但紫色的东西从两侧都是均匀的,换句话说,将被分成两半,一个在一开始,一结束。注意:尽量不要使用固定的
width
/height
对我来说,检查所有父母的
max-width
/max-height
帮助我发现其中一个被设置为小于孩子。