Как вставить картинку так, чтобы она была ровно сбоку от текста?

Question

Пытаюсь скопировать сайт, чтобы получить базовые знания и с этим уже двигаться дальше, хочу вставить картинку ровно сбоку от текста, но как это сделать не понимаю, она либо уходит под текст, либо вставляется между текстом если я вставляю ее в первый div, в принципе так и должно быть, но как вставить сбоку все равно не понимаю.

* {
    margin: 0px;
    padding: 0px;
}

body {
  margin: 0px;
  font-family: "Inter", sans-serif;
  color: #fafafa;
  background-color: #000000;
  font-weight: 550;
}

header {
  background-color: #000000;
  height: 120px;
  margin: 0px;
  padding: 0px;
}

#logo {
    padding-top: 15px;
    margin-left: 170px;
    float: left;
}

li {
    color: #757575;
    font-family: "Inter", Sans-Serif;
    font-weight: 550;
    font-size: 13pt;
    margin-left: 25px;
    display: inline;
    margin-right: 5px;
}

ul{
    margin: 0px;
    padding: 28px;
}

a {
    color: #757575;
    text-decoration: none;
}

a:hover{
    color: #ffffff;
    transition: 0.3s;
}

div.title{
    margin-left: 165px;
    margin-top: 120px;
    font-size: 55pt;
}

span.highlite{
    text-decoration: underline;
    text-decoration-color: #00841e;
}

.subtitle{
    margin-left: 165px;
    font-size: 20pt;
    font-weight: 280;
}

#frontpagepepe{
    margin-left: 1150px;
}

<!DOCTYPE html>
<html lang=ru>

 <head>
  <meta charset=utf-8>
  <title>Pepeland | Главная</title> <!--заголовок, отображается в названии вкладки-->
  <link rel="stylesheet" href="frontpagecss.css"> <!--rel показывает что мы подключили стили, а href это название файла-->
  <link rel="icon" href="pictures/pepe.png" type="image">
 </head>
 
 <body>
  <header>  <!--шапка сайта-->
   <div id="logo">
      <a href="frontpage.html"><img src="pictures/logo.png" width="45"></a>
   </div>
   
   <div id="container_menu">
      <ul>
       <li><a href="frontpage.html">Главная</a></li>
        <li><a href="serverinfo.html">Инфо</a></li>
         <li><a href="rules.html">Правила</a></li>
          <li><a href="worlds.html">Миры</a></li>
           <li><a href="discord.html">Discord</a></li>
      </ul>
   </div>
  </header>
   <div class="title">
     <p>Ванильный сервер <br/> для <span class="highlite">всех</span></p>
   </div>
    <div>
      <p class="subtitle"><br/>Мы активное сообщество <span class="highlite">креативных</span> пипочатеров.<br/>Лицензионный Minecraft: Java Edition сервер на версии 1.16.4</p>
    <div>
  <footer> <!--подвал сайта, как шапка, но в самом низу-->
  </footer>  
 </body>
 
</html>

Answer 1

Почитайте про свойство flex в css. Вот хорошая статья.

body{
  background-color: #000;
  color: #fff;
}
.wrapper{
  display: flex;
  
  
  align-items: center; 
  /*текст по центру*/
  
  
  /*   align-items: flex-end;*/
  /*    текст снизу  */
}

<div class="wrapper">
  <div class="heading">
    <h1 class="title">
      Заголовок
    </h1>
    <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptatem odio, expedita deleniti veniam recusandae.</p>
  </div>
  <div class="picture">
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt="logo">
  </div>
</div>

БЛОГ НА HUSL

Как вставить картинку так, чтобы она была ровно сбоку от текста?

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