Доверьте продвижение нам

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Как расположить элементы друг под другом CSS

Views Icon6

Для расположения элементов друг под другом в CSS можно использовать свойство display с значением block или flex.

  1. Display: block
    Это свойство превращает элемент в блочный, который занимает всю доступную ширину и переносит следующий элемент на новую строку. Пример:
<div class="block">
  <p>Первый элемент</p>
  <p>Второй элемент</p>
  <p>Третий элемент</p>
</div>

.block p {
  display: block;
}
  1. Display: flex
    Это свойство превращает элемент в контейнер с гибкими элементами, которые могут быть выстроены в любом направлении. Пример:
<div class="flex">
  <p>Первый элемент</p>
  <p>Второй элемент</p>
  <p>Третий элемент</p>
</div>

.flex {
  display: flex;
  flex-direction: column; /* выстраиваем элементы вертикально */
}

Также можно использовать свойство float, но оно не рекомендуется, так как может вызывать проблемы с выравниванием и пересечением элементов.

Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.