无法摆脱 div 的紫色虚线区域

Question

在学习了一点 CSS 和 flexbox 之后，我正在尝试构建一个 Landing 小册子网站。在构建一个的过程中，我遇到了一个我自己无法解决的问题。 我试图通过让Col 元素或Row 元素展开来删除紫色虚线区域。尽管努力这样做，紫色虚线区域并没有消失。我应该添加一些 CSS 吗？我希望通过填充它看起来有点居中对齐。由于多个依赖项，我无法让代码在 sn-p 上运行，但我希望屏幕截图有所帮助。

<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;

Screenshot

Answer 1

所以这里有几个解决方案：

• 你必须用width: 100%来制作这个容器，这样容器就会占用父容器的所有空间，不会有任何紫色的东西。
• 其他解决方案是父节点的justify-content: center，这样子节点将位于中心，但紫色的东西将从两侧均匀，换句话说将分成两个均匀的一半，一个在开始，一个在结束。

注意：尽量不要使用固定的width/height