Как расположить 2 div элемента с 1 классом на одной строке в разных частях экрана без использования идентификаторов?

Question

[Абсамат Зайналбеков]

Задача:

Код:

{% for el in apps %}
<div class="container">
    <div class="con">
        <h1 class="title"><b><a class="title" href="#">{{ el.title }}</a></b></h1>
        <p class="intro">{{ el.intro }}</p>
        <p class="date">Дата публикации: {{ el.data }}</p>
    </div>
</div>
{% endfor %}

Как вы уже поняли - проект на django. А данные беру из БД sqlite3

Answer 1

[Сергей delphinpro]

<div class="wrapper">
  <div class="item">
    ...
  </div>
  <div class="item">
    ...
  </div>
</div>

вариант на flex

.wrapper {
  display: flex;
  gap: 2rem;
}

.item {
  flex-basis: 50%;
}

вариант на grid

.wrapper {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 1fr 1fr;
}

Answer 2

[gimntut]

Если хотите управлять количеством карточек в строке и заполнением строки, то лучше воспользоваться предложенными Сергей delphinpro флексами (display: flex;) и гридами (display: grid;).

Если ли же нужно просто заполнить строку, то можно использовать инлайн-блоки:

.container {
    display: inline-block;
}