Блог

Я пытаюсь создать часть своего веб-сайта,

Вот код:

 import React from 'react';
import './stylesheets/BeyondHelloWorld.css';

import BHW from './assets/bhw.png';

function BeyondHelloWorld() {
    return (
        <div className="mainDiv">
            <div className="card">
                <div className="cardContainer">
                    <div style={{height: "100%", display: "block"}}>
                        <img src={BHW} className="bhwImage"/>
                    </div>
                    <div class="bhwText">
                        <span className="bhwTitle">BeyondHelloWorld</span>
                        <span className="fadedTitle">Beyond</span>
                        <span className="bhwDescription">BeyondHelloWorld is a learning community for budding programmers. It is aimed at equipping amateurs with easy knowledge of the tech world through engaging content like New Tech information, tips amp; tricks amp; BTS of a developers life!</span>
                        <span className="bhwDescription">A lot of community problems can be solved using technology. BeyondHelloWorld aims to influence non-programmers into the world of programming.</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default BeyondHelloWorld
  

Если вы видите описание span bhwDescription, оно находится внутри bhwText div, который находится внутри cardContainer.
Теперь у меня есть изображение слева с именем класса bhwImage

Когда текст превышает высоту этого изображения, текст начинается слева от cardContainer, но я хочу, чтобы он начинался с начального края bhwText.

Пример:

Но с моим кодом, как это выглядит:

Что я делаю не так? Кроме того, если вы заметили, fadedTitle и bhwTitle не выровнены точно. Я хочу, чтобы все они начинались там, где начинается картинка. Но что-то происходит. Даже если я сохраняю отступы / поля одинаковыми, даже тогда они начинаются по-разному.

Вот css:

 .mainDiv {
  width: 100%;
  padding: 50px;
  background-color: #1e3512;
}

.card {
  background-color: #1e3512;
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.48);
  padding: 0;
  overflow: hidden;
}

.cardContainer {
  margin: 0;
  padding: 0 20px 0 0;
  width: 100%;
}

.bhwImage {
  height: 18vh;
  object-fit: contain;
  margin: 40px;
  border: 5px solid #fff;
  float: left;
}

.bhwText {
  margin-top: 20px;
  color: #ffffff;
}

.bhwTitle {
  font-size: 3.5rem;
  font-weight: 600;
  display: block;
  margin-bottom: 20px;
}

.fadedTitle {
  position: absolute;
  top: 25px;
  font-size: 150px;
  line-height: 75px;
  opacity: 0.1;
  font-weight: 900;
}

.bhwDescription {
  display: block;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 500;
  word-wrap: break-word;
}
  

Добавить display:flex в свой .cardContainer класс

 .cardContainer {
    margin: 0;
    padding: 0 20px 0 0;
    width: 100%;
    display: flex;
}
  

и удалить width:100% из .mainDiv класса

 .mainDiv {
    /* width: 100%; */      remove this
    padding: 50px;
    background-color: #1e3512;
    display: flex;
}
  

Живая демонстрация

Причина, по которой содержимое отображается под изображением, заключается в том, что его стиль float: left; , а ваш .bhwText класс имеет ширину 100%, потому что это блочный элемент. div элементы, как правило display: block; , по умолчанию. Это означает .bhwText , что ширина по умолчанию составляет 100% от родительского контейнера. Текст будет заполнять пространство, где оно доступно в его контейнере; в том числе под изображением.

Чтобы устранить эту проблему, добавьте left padding в .bhwText класс. Что-то вроде этого примера здесь.

 .bhwText {
    margin-top: 20px;
    color: #ffffff;
    padding: 0 0 0 200px;
}