组件/元素未正确放置到彼此并影响其他元素

Question

我正在建立一个主页，在这个网页中，我必须显示一个带有文本、段落、按钮和图标的图像。

这就是我想要达到的目标：

这就是我所拥有的：

几天前我能够让它工作，但我意识到所有的布局/css......都非常复杂，以至于我的整个页面都搞砸了。因此，为了防止出现更多复杂情况，我从头开始重建页面，添加文本，然后用内容替换文本并确保一切正常。

您可以看到文本/标题/图标/按钮不在图像上，它到处都是。也许，我需要使用div 和图像作为背景。

我注意到过去发生过这样的情况，应该在图像顶部放置的元素文本、按钮、...有时会移动并受到其他元素的影响。

我在下面添加代码：

import React from 'react';

import VillageBanner from '../assets/images/village-banner-icon.png';
import DiscoverImage from '../assets/images/discover-home.jpg';
import WhiteButton from '../components/materialdesign/WhiteButton';
import BlueButton from '../components/materialdesign/BlueButton';
import HomeCarousel from '../components/HomeCarousel';
import Slider from '../components/materialdesign/VillageSlider';

import TextContents from '../assets/translations/TextContents';


import './Home.css';

class Home extends React.Component {
    
    render() {
        const TheWorldIsYours = 
            <div className="home-full-section">
                <div>
                    <img
                        src= { DiscoverImage }
                        className= "home-discover-background"
                        alt="Village"
                        />
                </div>
                <div>
                    <div className="home-discover-text-container">
                        <h1>{TextContents.ThinkOfUs}</h1>
                        <p>{TextContents.TheWorldIsYours}</p>
                        <div className="button-discover">
                            <WhiteButton textSize="14" link_href="/discover" text={TextContents.DiscoverBtn} />
                        </div>
                    </div>
                    <div>
                    <img
                        src= { VillageBanner }
                        className = "home-discover-banner"
                        alt="Village"
                    />
                    </div>
                </div>
            </div>;

            const CuratedLearning = 
                    <div className="home-section">
                        <h1>{TextContents.CuratedTitle}</h1>
                        <p>{TextContents.CuratedDesc}</p>
                        <BlueButton textSize="14" link_href="/hereisthemission" text={TextContents.HereIsBtn} />
                    </div>;

            const WhatsTrending = 
                    <div className="home-section">
                        <h1>{TextContents.TrendTitle}</h1>
                    </div>

            const WhatsNearby = 
                    <div className="home-section">
                        <h1>{TextContents.NearbyTitle}</h1>
                    </div>


        return (
            <div className="home-container">
                <div>
                    {TheWorldIsYours}
                </div>
                <div>
                    {CuratedLearning}
                </div>
                <div>
                    {WhatsTrending}
                    <div>
                        <HomeCarousel />
                    </div>
                </div>
                <div className="add-space">
                    {WhatsNearby}
                    <div>
                        <Slider />
                    </div>
                </div>
            </div>
                );
        }
}

export default Home;

并且关联的 css 是：

.home-discover-container{
    width: 100%;
    height: auto;
    border-radius: 21.5px;
}

.home-discover-background {
    width: 100%;
    height: auto;
    border-radius: 21.5px;
}

.home-discover-text-container {
    width: auto;
    height: auto;
    position: absolute;
    text-align-last: left;
    top: 35%;
    bottom: 0;
    left: 20%;
    right: 0;
}

.home-discover-text-container h1 {
    position: relative;
    width: 25rem;
    font-family: Fredoka One;
    font-size: 2,5rem;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    color: #ffffff;
}

.home-discover-text-container p {
    position: relative;
    width: 200px;
    font-family: Source Sans Pro;
    font-size: 22px;
    font-weight: normal;
    text-align: left;
    color: #ffffffff;
}




.home-container {
    margin-bottom:5rem;
}

.home-full-section {
    margin-left: auto;
    margin-right: auto;
    margin-bottom:4rem;
    width: 100%;
}


/* tablet, ipad  version (change font-size here if needed)*/
@media (min-width: 768px) and (max-width: 1024px){
    .home-discover-text-container h1 {
        font-size: 34px;
    }
    .home-discover-text-container p {
        font-size: 22px;
    }
}

/* mobile version (change font-size here if needed)*/
@media (max-width: 600px) {
    .home-discover-text-container, .home-discover-text-container h1, .home-discover-text-container p{
        width: calc(100% - 20%); /* subtract the left:20% of .text-tile in desktop-version  and set full width */
    }
    .home-discover-text-container h1 {
        font-size: 22px;
    }
    .home-discover-text-container p {
        font-size: 18px;
    }
}

.home-discover-banner {
    width: 54px;
    height: 82px;
    position: absolute;
    text-align: left;
    top: 35.5%;a
    bottom: 0; 
    left: 15%; 
    right: 0;
}

.button-discover {
    position: absolute;
    text-align: left;
    top: 38%;
}

.button-curated {
    position: absolute;
    text-align: left;
    top: 32%;
}

所以我想要实现的是将图像、标题、文本、图标和按钮视为一个元素，整体设计保持原样并保持响应性，保持几乎相同的设计，除了字体可能必须改变以保持良好状态

感谢您的帮助

Answer 1

把它放在一个 div 里面，并将图片设置为 css 中的背景图片。您还可以在子级上使用 position: absolute 和在父级上使用 position: relative 和一些 top: left: 间距以使其看起来不错。