Почему текст сместился вниз и как сделать его справа от картинки?

Question

Вот код, помощь нужна с блоком story именно так текст ниже картинки

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="C:\Users\k1ngsterr\OneDrive\Рабочий стол\HTML CODES\Stepik 7 Project\styles\styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
    <header class="header">
        <nav class="menu">
            <ul class="menu__ul">
                <li class="menu__li"><a class="menu__link" href="#">HOME</a></li>
                <li class="menu__li"><a class="menu__link" href="#">STORY</a></li>
                <li class="menu__li"><a class="menu__link" href="#">BLOG</a></li>
                <li class="menu__li"><a class="menu__link" href="#">SUBSCRIBE</a></li>
            </ul>
            <a class="menu__logo" href="#">COFFEE HOUSE</a>
        </nav>
    </header>
    <div class="photo">
        <div class="line"></div>
        <p class="par">TAKE YOUR TIME</p>
        <img src="https://images.unsplash.com/photo-1494415859740-21e878dd929d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzOTMxNTg2MQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1920"
            width="100%" height="822px">
    </div>
    <div class="story">
        <!-- Открытие блока стори -->
        <h2 class="header_second">STORY</h2>
        <div>
            <!-- Открытие блока с картинкой -->
            <img class="imag" src="https://images.unsplash.com/photo-1507915135761-41a0a222c709?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzOTMxNTkxNw&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1920"
                width="600px" height="400px"> </div>
        <!-- Закрытие блока с картинкой -->
        <div class="text">
            <!-- Открытие открытие текст -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius eget arcu quis cursus. Nunc id tortor imperdiet, vestibulum orci sed, gravida orci. Cras a enim ac elit eleifend euismod. Class aptent taciti sociosqu ad litora torquent
                per conubia nostra, per inceptos himenaeos. Praesent mattis ultrices est, congue ullamcorper erat bibendum pulvinar. In accumsan dapibus accumsan. Maecenas semper est ut nunc feugiat, vel ultrices ligula commodo. Donec eget pulvinar nunc,
                eget pharetra risus.</p>
        </div>
        <!-- Закрытие блока текст -->
    </div>
    <!-- Закрытие блока стори -->
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Oswald" sans-serif;
}

.header {
    width: 100%;
    height: 110px;
}

.menu {
    padding-top: 29px;
    padding-bottom: 28px;
    background-color: rgb(255, 255, 255);
    display: flex;
    padding-left: 80px;
    padding-right: 80px;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: baseline;
}

.menu__ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    width: 392px;
}

.menu__link {
    text-decoration: none;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase;
    color: black;
}

.menu__logo {
    text-decoration: none;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 53px;
    text-align: center;
    text-transform: uppercase;
    color: black;
}

.menu__link:hover {
    color: #805d45;
}

.menu__logo:hover {
    color: #805d45;
}

.photo {
    border-bottom: #805d45;
}

.par {
    width: 399px;
    position: absolute;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 89px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    padding-left: 760px;
    padding-right: 760px;
    padding-bottom: 380.5px;
    padding-top: 380.5px;
}

.line {
    width: 80px;
    height: 10px;
    background: #817070;
    position: absolute;
    margin: 490px auto;
    left: 920px;
}

.story {
    height: 632px;
}

.header_second {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 53px;
    text-align: center;
    text-transform: uppercase;
    color: #000000;
    padding-top: 60px;
}

.imag {
    padding-top: 60px;
    padding-bottom: 59px;
    padding-left: 80px;
}

.text {
    float: right;
    width: 597px;
    height: 180px;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    color: #000000;
}

Answer 1

Потому что и div и p являются блочными элементами, а блочные элементы идут друг под другом. Это можно исправить используя flex-box. Задаём родительскому div display: flex и упаковываем в него ваш div с картинкой и параграф. Снизу примерный код решающий проблему.

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

<div class="content">
  <!-- Открытие блока с картинкой -->
  <img class="imag" src="https://images.unsplash.com/photo-1507915135761-41a0a222c709?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzOTMxNTkxNw&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1920"
    width="600px" height="400px"> </div>
<!-- Закрытие блока с картинкой -->
<div class="text">
  <!-- Открытие открытие текст -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius eget arcu quis cursus. Nunc id tortor imperdiet, vestibulum orci sed, gravida orci. Cras a enim ac elit eleifend euismod. Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos. Praesent mattis ultrices est, congue ullamcorper erat bibendum pulvinar. In accumsan dapibus accumsan. Maecenas semper est ut nunc feugiat, vel ultrices ligula commodo. Donec eget pulvinar nunc, eget pharetra risus.</p>

БЛОГ НА HUSL

Почему текст сместился вниз и как сделать его справа от картинки?

Ответы (1 шт):