HTML-<div>-Tag
Das <div>-Tag ist ein Container, der verwendet wird, um eine Division oder einen Abschnitt zu definieren. Es ist ein Block-Element, das den Inhalt nicht von sich aus beeinflusst, sondern hauptsächlich dazu dient, HTML-Elemente zu gruppieren, die mit CSS gestaltet oder mit Skripten bearbeitet werden.
Positionierung von Blöcken, die durch das <div>-Tag definiert werden
TIP
Wir empfehlen, das <div>-Tag nur dann zu verwenden, wenn keine anderen semantischen Elemente, die in HTML5 eingeführt wurden (wie <nav>, <main> oder <article>), geeignet sind.
Da <div> ein Block-Element ist, wird davor und danach ein Zeilenumbruch eingefügt.
Es ist möglich, jedes HTML-Element innerhalb eines <div>-Tags zu platzieren, einschließlich eines weiteren <div>.
DANGER
Block-Elemente wie <div> können nicht innerhalb von <p>-Tags verschachtelt werden, da der Absatz an der Stelle unterbrochen wird, an der das <div>-Tag platziert ist.
Um Stile innerhalb eines Absatzes anzuwenden, verwenden Sie das <span>-Tag, das mit Inline-Elementen verwendet wird.
Syntax
Das <div>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<div>) und dem schließenden (</div>) Tag geschrieben.
Beispiel für das HTML-<div>-Tag:
Beispiel für das HTML-<div>-Tag
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html>Wenn wir Layouts erstellen, arbeiten wir mit mehreren Blöcken, die durch das <div>-Tag definiert werden. Die Positionierung dieser Blöcke steht im Zentrum des Layouts: Elemente in den richtigen relativen Positionen über alle Bildschirmgrößen hinweg zu platzieren, ist eine der wichtigsten Aufgaben.
Je nach Inhalt und Ziel der Seite können wir verschiedene Techniken (oder deren Kombinationen) verwenden, um die Position jedes Blocks zu bestimmen. Lernen wir diese Techniken näher kennen.
Flexbox ¶
In modernen Websites werden float-basierte Layouts durch Flexbox ersetzt. Die Hauptidee hinter Flexbox ist, dass Sie damit die Ausrichtung, Richtung, Reihenfolge und Größe der Elemente innerhalb des Containers steuern können.
Beispiel für eine Flexbox mit HTML-<div>-Tag:
Ein Beispiel für das HTML-<div>-Tag mit Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>CSS-Float-Eigenschaft ¶
Die CSS-float-Eigenschaft oder „Floats“ ermöglicht es, dass Elemente nebeneinander oder getrennt voneinander erscheinen, wodurch wir verschiedene Arten von Layouts erstellen können, einschließlich mehrspaltiger Seiten, Seitenleisten, Raster usw.
Beispiel für das HTML-<div>-Tag mit der CSS-Float-Eigenschaft:
Beispiel für das HTML-<div>-Tag mit der CSS-Float-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Ergebnis
Negative Margins ¶
Negative Margins können sowohl auf statische als auch auf gefloatete Elemente angewendet werden.
Beispiel für negative Margins:
Beispiel für das HTML-<div>-Tag mit negativen Margins
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Relative+absolute positioning ¶
Wenn Sie ein div relativ zu einem bestimmten Element positionieren möchten, können Sie eine Kombination aus position: relative und position: absolute verwenden.
Beispiel für relative+absolute Positionierung des HTML-<div>-Tags:
Ein Beispiel für das HTML-<div>-Tag mit der CSS-Positionseigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>DANGER
position: relative beeinflusst die Positionierung von Elementen im normalen Fluss nicht, es sei denn, Sie fügen Offsets hinzu.
Attribute ¶
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left right center justify | Wurde verwendet, um den Inhalt innerhalb eines <div>-Tags auszurichten. Dieses Attribut wird in HTML5 nicht unterstützt. Stattdessen wird die CSS text-align property verwendet. |
Das <div>-Tag unterstützt außerdem die Global attributes und die Event Attributes.
Wie man ein HTML-<div>-Tag gestaltet
{
"tag_name": "div"
}Practice
What is the primary function of the HTML <div> tag?