HTML Элемент div

Элемент <div> используется как контейнер для других HTML-элементов.

---

Элемент <div>

Элемент <div> по умолчанию является блочным элементом, занимающим всю доступную ширину и имеющим разрыв строки до и после него.

Пример

Элемент <div> занимает всю доступную ширину:

Lorem Ipsum <div>Я div</div> dolor sit amet.

Результат

Элемент <div> не требует обязательных атрибутов, но часто используются атрибуты style, class и id.

---

Элемент <div> как контейнер

Элемент <div> часто используется для группировки секций веб-страницы.

Пример

Элемент <div> с HTML-элементами:

<div>
  <h2>Лондон</h2>
  <p>Лондон — столица Англии.</p>
  <p>Население Лондона превышает 9 миллионов человек.</p>
</div>

Результат:

---

Центрирование элемента <div>

Если ширина вашего элемента <div> меньше 100%, и вы хотите центрировать его горизонтально, задайте CSS-свойству margin значение auto.

Пример:

div {
  width: 300px;
  margin: auto;
}

Результат:

---

Несколько элементов <div>

На странице может быть несколько контейнеров <div>.

Пример:

<div>
  <h2>Лондон</h2>
  <p>Лондон — столица Англии.</p>
  <p>Население Лондона превышает 9 миллионов человек.</p>
</div>

<div>
  <h2>Осло</h2>
  <p>Осло — столица Норвегии.</p>
  <p>Население Осло превышает 700 тысяч человек.</p>
</div>

<div>
  <h2>Рим</h2>
  <p>Рим — столица Италии.</p>
  <p>Население Рима превышает 4 миллиона человек.</p>
</div>

Результат:

---

Расположение элементов <div> бок о бок

Часто при построении веб-страниц нужно расположить два или более элемента <div> бок о бок, например:

Есть несколько методов выравнивания элементов бок о бок, все они включают CSS-стилизацию. Рассмотрим самые распространённые:

---

Float (Плавающие элементы)

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

Пример:

Использование float для расположения элементов <div> бок о бок:

.mycontainer {
  width: 100%;
  overflow: auto;
}

.mycontainer div {
  width: 33%;
  float: left;
}

---

Inline-block (Встроенно-блочные элементы)

Если поменять у элемента <div> свойство display с block на inline-block, он перестанет занимать целую строку и разместится бок о бок с соседними элементами.

Пример:

Использование display: inline-block для расположения элементов <div> бок о бок:

div {
  width: 30%;
  display: inline-block;
}

---

Flex (Гибкая сетка)

Модуль CSS Flexbox появился для облегчения проектирования гибких отзывчивых макетов без использования плавающих элементов или позиционирования.

Пример:

Использование Flexbox для расположения элементов <div> бок о бок:

.mycontainer {
  display: flex;
}

.mycontainer > div {
  width: 33%;
}

---

Grid (Сетка)

Модуль CSS Grid предлагает сеточную систему, состоящую из рядов и столбцов, что упрощает проектирование веб-страниц без необходимости использования плавающих элементов или позиционирования.

Пример:

Использование сетки для расположения элементов <div> бок о бок:

.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}