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.
