Как расположить блоки в контейнере таким образом, чтобы они не требовали дополнительных оберток?

Изображение к вопросу
  • 7 сентября 2023 г. 12:46
Ответы на вопрос 1
Приветствую! 

К сожалению, при использовании только CSS в данном случае нельзя обойтись без дополнительной обертки для блоков. Однако, можно использовать флексбокс, чтобы создать желаемый эффект. 

Вот пример кода, который позволит расположить блоки в две строки и перенести их на новую колонку при необходимости:

```html
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <!-- и так далее -->
</div>
```

```css
.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px; /* Фиксированная ширина контейнера */
}

.block {
  width: 100px; /* Ширина блока */
  height: 100px; /* Высота блока */
}
```

В этом примере я использовал фиксированную ширину контейнера (400 пикселей) и фиксированную ширину и высоту для блоков (100 пикселей). Если блоки не помещаются на экране, они автоматически переносятся на новую строку и новую колонку.

Надеюсь, это поможет вам решить вашу задачу!
Похожие вопросы