Стиль div-контента справа от изображения - PullRequest
0 голосов
/ 30 апреля 2020

Я пытаюсь создать такое же изображение и описание div, но я хочу сделать описание слева от изображения. Когда я добавляю изображение, все описание идет вниз. Как сделать так, чтобы описание контейнера находилось справа от изображения, не заходя под изображение?

CSS / HTML

#thirdContainer {
    min-height: 100vh;
    background-image: url();
    background-size: cover;
     }
    #aboutUs {
        padding-top: 15vh;
        color: black;
        font-family: 'Martel', serif;
        max-width: inherit;
        text-align: left;
        padding-left: 100vh;
    }
    #aboutUsContent{
    padding-left: 50em;
    height: 100vh;
    margin-right: 35em;
    }
    #breadImage {
    padding-top: 20vh;
    margin-left: 8vh;
    }
<div id="thirdContainer">
<img id="breadImage" src="https://via.placeholder.com/200x100.jpg/09f/fff">
<h2 id="aboutUs"><strong>About Us</strong></h2>
<div id="aboutUsContent">
<p>Description content</p>
</div>
</div>

1 Ответ

0 голосов
/ 30 апреля 2020

Много вариантов там.

Быстрое решение с использованием flex: (добавлен еще один div для объединения полей описания)

.flex-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
<div id="thirdContainer" class="flex-grid">
<img id="breadImage" src="https://via.placeholder.com/200x100.jpg/09f/fff">
<div>
<h2 id="aboutUs"><strong>About Us</strong></h2>
<div id="aboutUsContent">
<p>Description content</p>
</div>
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...