HTML Элемент Div
Элемент <div> используется в качестве контейнера для других элементов HTML.
Элемент <div>
Элемент <div> по умолчанию является блочным элементом, что означает, что он занимает всю доступную ширину и имеет разрывы строк перед и после.
Пример
Элемент <div> занимает всю доступную ширину:
Lorem Ipsum <div>I am a div</div> dolor sit amet.
Результат
Попробуйте сами »
Элемент <div> не имеет обязательных атрибутов, но распространены style, class и id.
Элемент <div> как контейнер
Элемент <div> часто используется для группировки разделов веб-страницы.
Пример
Элемент <div> с элементами HTML:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
Результат
London
London is the capital city of England.
London has over 13 million inhabitants.
Попробуйте сами »
Выравнивание элемента <div> по центру
Если у вас есть элемент <div> шириной не 100%, и вы хотите выравнять его по центру, установите CSS свойство margin на auto.
Пример
<style>
div {
width:300px;
margin:auto;
}
</style>
Результат
London
London is the capital city of England.
London has over 13 million inhabitants.
Попробуйте сами »
Несколько <div> элементов
Вы можете иметь много контейнеров <div> на одной странице.
Пример
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
Результат
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Попробуйте сами »
Выравнивание элементов <div> друг возле друга
Во время создания веб-страниц вы часто хотите иметь два или больше элементов <div> рядом, например:
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Существуют различные методы для выравнивания элементов рядом (друг возле друга), все включают некоторые стили CSS. Мы рассмотрим самые распространенные методы:
Float
Свойство CSS float сначала не было предназначено для выравнивания элементов <div> друг возле друга, но использовалось для этой цели в течение многих лет.
Свойство CSS float используется для размещения и форматирования содержимого и позволяет элементам плавать рядом друг с другом, а не находиться друг над другом.
Пример
Как использовать float для выравнивания элементов div рядом:
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Результат
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Попробуйте сами »
Узнайте больше о float в нашем учебнике в разделе CSS float.
Inline-block
Если изменить свойство display элемента <div> из block на inline-block, элементы <div> больше не будут добавлять разрыв строки до и после, и будут отображаться рядом, а не друг над другом.
Пример
Как использовать display: inline-block для выравнивания элементов div рядом:
<style>
div {
width: 30%;
display: inline-block;
}
</style>
Результат
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Попробуйте сами »
Flex
CSS Flexbox Layout Module был представлен, чтобы упростить разработку гибкой адаптивной структуры макета без использования float или позиционирования.
Чтобы CSS метод flex работал, окружите элемент <div> другим элементом <div> и дайте ему статус flex-контейнера.
Пример
Как использовать flex для выравнивания элементов div друг возле друга:
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Результат
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Попробуйте сами »
Узнайте больше о flex в нашем учебнике в разделе CSS flexbox.
Grid
CSS Grid Layout Module предлагает систему макета на основе сетки со строками и столбцами, что облегчает разработку веб-страниц без использования плавающих (float) элементов и позиционирования.
Звучит почти так же, как flex, но может определять более одной строки и позиционировать каждую строку в отдельности.
Метод CSS-сетки требует окружить элементы <div> другим элементом <div> и предоставить статус как контейнер сетки, и вы должны указать ширину каждого столбца.
Пример
Как использовать сетку для выравнивания элементов <div> друг возле друга:
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
Результат
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Попробуйте сами »
Узнайте больше о сетке в нашем учебнике в разделе CSS Grid.
HTML Теги
| Тег | Описание |
|---|---|
| <div> | Определение раздела в документе (на уровне блока) |
Чтобы получить полный список всех доступных тегов HTML, посетите наш Справочник тегов HTML.
