Хочу чтобы div были слева друг от друга а не уходили вниз

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

.Div {
  position: relative;
  left: 10px;
  top: 10px;
  background: rgba(0, 0, 0, 0.548);
  width: 300px;
  height: 500px;
}

.Text {
  position: relative;
  font-size: 13pt;
  color: white;
}
<div class="Div">
  <a href="#">
    <img src="/resource/photo/Logos/Log.jpg" class="Logo" alt="Dives">
    <p class="Text">Милый</p>
    <p class="Text">Сериал</p>
  </a>
</div>


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

Автор решения: Владлен Вожжаев

Наверно так, но вообще это лучше сделать немного иначе. Возьмите bootstrap не мучайтесь, там уже есть готовая сетка, решите задачу за пару минут. https://bootstrap-4.ru/docs/4.4/layout/grid/

.Div {
  display:inline-block;
  background: rgba(0, 0, 0, 0.548);
  width: 300px;
  height: 500px;
}

.Text {
  position: relative;
  font-size: 13pt;
  color: white;
}
<div class="Div">
  <a href="#">
    <img src="/resource/photo/Logos/Log.jpg" class="Logo" alt="Dives">
    <p class="Text">Милый</p>
    <p class="Text">Сериал</p>
  </a>
</div>
<div class="Div">
  <a href="#">
    <img src="/resource/photo/Logos/Log.jpg" class="Logo" alt="Dives">
    <p class="Text">Милый</p>
    <p class="Text">Сериал</p>
  </a>
</div>

→ Ссылка