Для попарного размещения блоков в контейнере без добавления оберток можно использовать CSS-свойство "column-count" в сочетании с "column-gap".
"Column-count" задает количество колонок, в которые будет разделен контейнер, а "column-gap" определяет расстояние между колонками.
Прежде всего, убедитесь, что контейнер имеет достаточную ширину, чтобы вместить все блоки. Затем добавьте следующие стили для контейнера:
.container {
column-count: 2; /* задаем две колонки */
column-gap: 20px; /* задаем промежуток между колонками в пикселях */
}
После этого все блоки внутри контейнера будут автоматически размещены попарно, заполняя доступное горизонтальное пространство равномерно.
Например, если у вас есть следующая разметка:
<div class="container">
<div class="block">Блок 1</div>
<div class="block">Блок 2</div>
<div class="block">Блок 3</div>
<div class="block">Блок 4</div>
<div class="block">Блок 5</div>
<div class="block">Блок 6</div>
</div>
CSS-стили будут следующие:
.container {
column-count: 2;
column-gap: 20px;
}
.block {
/* остальные стили блоков */
}
Теперь блоки будут автоматически размещены попарно, заполняя доступное горизонтальное пространство. Если контейнер будет иметь достаточную ширину, то блоки будут отображаться в двух колонках, а если нет, то они расположатся по вертикали с нужным промежутком между ними.
Это удобный и гибкий способ размещения блоков попарно без необходимости добавлять дополнительные обертки или использовать JavaScript.