Элемент div в HTML

Элемент HTML Div

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

Элемент <div>

По умолчанию <div> — блочный элемент, поэтому он занимает всю доступную ширину и имеет переносы строк до и после себя. У него нет обязательных атрибутов, но style, class и id распространены.

Пример

<div>, занимающий всю ширину и разбивающий окружающий текст на отдельные строки.

Страница, показывающая, что div занимает всю доступную ширину: текст «Lorem Ipsum», затем div со словами «I am a div», затем «dolor sit amet.», так что div переносится на отдельную строку.

> Результат: полная HTML-страница

Prompt

Страница, показывающая, что div занимает всю доступную ширину: текст «Lorem Ipsum», затем div со словами «I am a div», затем «dolor sit amet.», так что div переносится на отдельную строку.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ширина Div</title>
</head>
<body>

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

</body>
</html>

<div> как контейнер

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

Пример

<div>, группирующий заголовок и абзацы.

Div, используемый для группировки раздела: div, содержащий h2 «London» и два абзаца о Лондоне.

> Результат: полная HTML-страница

Prompt

Div, используемый для группировки раздела: div, содержащий h2 «London» и два абзаца о Лондоне.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div-контейнер</title>
</head>
<body>

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

</body>
</html>

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

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

Пример

Центрированный <div>.

Страница, которая центрирует div шириной 300px с помощью CSS-свойства margin auto, содержащий h2 «London» и два абзаца.

> Результат: полная HTML-страница

Prompt

Страница, которая центрирует div шириной 300px с помощью CSS-свойства margin auto, содержащий h2 «London» и два абзаца.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 300px;
  margin: auto;
}
</style>
</head>
<body>


  <div>
    <h2>London</h2>
    <p>Лондон — столица Англии.</p>
    <p>В Лондоне проживает более 9 миллионов человек.</p>
  </div>
  <div>
    <h2>Oslo</h2>
    <p>Осло — столица Норвегии.</p>
    <p>В Осло проживает более 700 000 человек.</p>
  </div>
  <div>
    <h2>Rome</h2>
    <p>Рим — столица Италии.</p>
    <p>В Риме проживает более 4 миллионов человек.</p>
  </div>


</body>
</html>

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

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

Пример

Три контейнера <div>, расположенные друг под другом на странице.

Страница с тремя отдельными div-контейнерами, по одному для Лондона, Осло и Рима, каждый с h2 и двумя абзацами.

> Результат: полная HTML-страница

Prompt

Страница с тремя отдельными div-контейнерами, по одному для Лондона, Осло и Рима, каждый с h2 и двумя абзацами.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Несколько Div</title>
</head>
<body>

  <div>
    <h2>London</h2>
    <p>Лондон — столица Англии.</p>
    <p>В Лондоне проживает более 9 миллионов человек.</p>
  </div>
  <div>
    <h2>Oslo</h2>
    <p>Осло — столица Норвегии.</p>
    <p>В Осло проживает более 700 000 человек.</p>
  </div>
  <div>
    <h2>Rome</h2>
    <p>Рим — столица Италии.</p>
    <p>В Риме проживает более 4 миллионов человек.</p>
  </div>

</body>
</html>

Выравнивание элементов <div> рядом друг с другом

При создании страниц часто требуется, чтобы два или более элементов <div> располагались рядом друг с другом. Есть несколько методов, все они используют CSS. Самые распространённые — float, inline-block, flex и grid.

Float

CSS-свойство float изначально не предназначалось для размещения элементов <div> рядом друг с другом, но так его используют уже много лет. Оно позиционирует и форматирует содержимое, позволяя элементам располагаться горизонтально, а не вертикально.

Пример

Три div, расположенные рядом с помощью float.

Страница, которая выравнивает три div-а с городами в один ряд с помощью CSS-свойства float, где каждый div занимает примерно треть ширины внутри контейнера.

> Результат: полная HTML-страница

Prompt

Страница, которая выравнивает три div-а с городами в один ряд с помощью CSS-свойства float, где каждый div занимает примерно треть ширины внутри контейнера.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycontainer {
  width: 100%;
  overflow: auto;
}
.mycontainer div {
  width: 33%;
  float: left;
}
</style>
</head>
<body>

<div class="mycontainer">
  <div>
    <h2>London</h2>
    <p>Лондон — столица Англии.</p>
    <p>В Лондоне проживает более 9 миллионов человек.</p>
  </div>
  <div>
    <h2>Oslo</h2>
    <p>Осло — столица Норвегии.</p>
    <p>В Осло проживает более 700 000 человек.</p>
  </div>
  <div>
    <h2>Rome</h2>
    <p>Рим — столица Италии.</p>
    <p>В Риме проживает более 4 миллионов человек.</p>
  </div>
</div>

</body>
</html>

Inline-block

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

Пример

Три div рядом друг с другом с display: inline-block.

Страница, которая выравнивает три div-а с городами в один ряд, задавая свойству display значение inline-block, примерно по 30% ширины каждый.

> Результат: полная HTML-страница

Prompt

Страница, которая выравнивает три div-а с городами в один ряд, задавая свойству display значение inline-block, примерно по 30% ширины каждый.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 30%;
  display: inline-block;
}
</style>
</head>
<body>


  <div>
    <h2>London</h2>
    <p>Лондон — столица Англии.</p>
    <p>В Лондоне проживает более 9 миллионов человек.</p>
  </div>
  <div>
    <h2>Oslo</h2>
    <p>Осло — столица Норвегии.</p>
    <p>В Осло проживает более 700 000 человек.</p>
  </div>
  <div>
    <h2>Rome</h2>
    <p>Рим — столица Италии.</p>
    <p>В Риме проживает более 4 миллионов человек.</p>
  </div>


</body>
</html>

Flex

Модуль компоновки CSS Flexbox упрощает создание гибких, адаптивных макетов без float или позиционирования. Чтобы использовать его, оберните элементы <div> в другой <div> и сделайте его flex-контейнером.

Пример

Три div рядом друг с другом с flexbox.

Страница, которая выравнивает три div-а с городами в один ряд с помощью CSS flexbox: flex-контейнер, оборачивающий три div-а.

> Результат: полная HTML-страница

Prompt

Страница, которая выравнивает три div-а с городами в один ряд с помощью CSS flexbox: flex-контейнер, оборачивающий три div-а.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycontainer {
  display: flex;
}
.mycontainer > div {
  width: 33%;
}
</style>
</head>
<body>

<div class="mycontainer">
  <div>
    <h2>London</h2>
    <p>Лондон — столица Англии.</p>
    <p>В Лондоне проживает более 9 миллионов человек.</p>
  </div>
  <div>
    <h2>Oslo</h2>
    <p>Осло — столица Норвегии.</p>
    <p>В Осло проживает более 700 000 человек.</p>
  </div>
  <div>
    <h2>Rome</h2>
    <p>Рим — столица Италии.</p>
    <p>В Риме проживает более 4 миллионов человек.</p>
  </div>
</div>

</body>
</html>

Grid

Модуль компоновки CSS Grid предоставляет систему на основе сетки из строк и столбцов, упрощающую макеты без float или позиционирования. Он похож на flex, но может определять более одной строки и позиционировать каждую из них. Оберните элементы <div> в grid-контейнер и задайте ширину каждого столбца.

Пример

Три div рядом друг с другом с CSS grid.

Страница, которая выравнивает три div-а с городами в один ряд с помощью CSS grid с тремя равными колонками.

> Результат: полная HTML-страница

Prompt

Страница, которая выравнивает три div-а с городами в один ряд с помощью CSS grid с тремя равными колонками.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}
</style>
</head>
<body>

<div class="grid-container">
  <div>
    <h2>London</h2>
    <p>Лондон — столица Англии.</p>
    <p>В Лондоне проживает более 9 миллионов человек.</p>
  </div>
  <div>
    <h2>Oslo</h2>
    <p>Осло — столица Норвегии.</p>
    <p>В Осло проживает более 700 000 человек.</p>
  </div>
  <div>
    <h2>Rome</h2>
    <p>Рим — столица Италии.</p>
    <p>В Риме проживает более 4 миллионов человек.</p>
  </div>
</div>

</body>
</html>