Как создать макет с использованием блоков div (подобно тому, что изображено на фото)?

Как можно реализовать адаптивный блок div, чтобы число и описание находились на одной строке, а описание и текст располагались вертикально под ними? В моем текущем коде блоки div с классами "number" и "subheading" отображаются друг над другом, а не рядом.
Изображение к вопросу
  • 20 декабря 2023 г. 14:17
Ответы на вопрос 2
Для создания макета с использованием блоков div и реализации адаптивного блока, где число и описание будут находиться на одной строке, а описание и текст будут располагаться вертикально под ними, можно использовать следующий HTML- и CSS-код:

HTML:
```html
<div class="container">
  <div class="number">1</div>
  <div class="description">Описание</div>
  <div class="text">Текст</div>
</div>
```

CSS:
```css
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.number {
  width: 50%;
  text-align: center;
}

.description {
  width: 50%;
  text-align: center;
}

.text {
  width: 100%;
  text-align: center;
}
```

В данном коде мы создаем родительский элемент `.container` и задаем ему свойство `display: flex` для того, чтобы его дочерние элементы выстраивались в строку. Свойство `flex-wrap: wrap` позволяет переносить дочерние элементы на новую строку при необходимости. Свойство `align-items: flex-start` выравнивает дочерние элементы по верхней границе контейнера.

Дочерние элементы `.number`, `.description` и `.text` занимают разные ширины с помощью свойства `width`. `.number` и `.description` занимают по половине ширины родительского элемента, чтобы отображаться на одной строке, а `.text` занимает всю ширину контейнера, чтобы быть расположеным под `.description`.

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

да и .flex-column для приведённого примера не особо нужен
Похожие вопросы