HTML Div-Element
Das Element <div> wird als Container für andere HTML-Elemente verwendet.
Das <div>-Element
Das Element <div> ist standardmäßig ein Blockelement, das heißt, es nimmt die gesamte verfügbare Breite ein und verfügt über Zeilenumbrüche davor und danach.
Beispiel
Ein <div>-Element nimmt die gesamte verfügbare Breite ein:
Lorem Ipsum <div>I am a div</div> dolor sit amet.
Ergebnis
Try it Yourself »
Das Element <div> hat keine erforderlichen Attribute, aber style, class und id sind üblich.
<div> als Container
Das Element <div> wird häufig verwendet, um Abschnitte einer Webseite zu gruppieren.
Beispiel
Ein <div>-Element mit HTML-Elementen:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
Ergebnis
London
London is the capital city of England.
London has over 13 million inhabitants.
Try it Yourself »
Richten Sie ein <div>-Element zentriert aus
Wenn Sie ein <div>-Element haben, das nicht 100% breit ist, und es zentriert ausrichten möchten, legen Sie den CSS-Wert fest. margin-Eigenschaft an auto.
Beispiel
<style>
div {
width:300px;
margin:auto;
}
</style>
Ergebnis
London
London is the capital city of England.
London has over 13 million inhabitants.
Try it Yourself »
Mehrere <div>-Elemente
Sie können viele <div>-Container auf derselben Seite haben.
Beispiel
<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>
Ergebnis
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.
Try it Yourself »
<div>-Elemente nebeneinander ausrichten
Beim Erstellen von Webseiten möchten Sie oft zwei oder mehr <div>-Elemente nebeneinander haben, wie folgt:
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.
Es gibt verschiedene Methoden zum Anordnen von Elementen nebeneinander, alle beinhalten einige CSS-Stile. Wir werden uns die gängigsten Methoden ansehen:
Float
Die CSS-Eigenschaft float war ursprünglich nicht dazu gedacht, <div>-Elemente nebeneinander auszurichten, hat dies aber getan werden seit vielen Jahren für diesen Zweck verwendet.
Die CSS-Eigenschaft float wird zum Positionieren und Formatieren von Inhalten verwendet und ermöglicht, dass Elemente nebeneinander statt übereinander schweben.
Beispiel
So verwenden Sie float, um div-Elemente nebeneinander auszurichten:
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Ergebnis
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.
Try it Yourself »
Erfahren Sie mehr über Float in unserem CSS-Float-Tutorial.
Inline-block
Wenn Sie die display-Eigenschaft des <div>-Elements aus dem block ändern zu inline-block hinzufügen, fügen die <div>-Elemente vorher keinen Zeilenumbruch mehr hinzu und danach und werden nebeneinander und nicht übereinander angezeigt.
Beispiel
So verwenden Sie display: inline-block, um div-Elemente nebeneinander auszurichten:
<style>
div {
width: 30%;
display: inline-block;
}
</style>
Ergebnis
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.
Try it Yourself »
Flex
Das CSS-Flexbox-Layoutmodul wurde eingeführt, um das Entwerfen einer flexiblen, responsiven Layoutstruktur ohne Verwendung von Float oder Positionierung zu erleichtern.
Damit die CSS-Flex-Methode funktioniert, umgeben Sie die Elemente <div> mit einem anderen Element <div> und geben Sie Folgendes an es den Status als Flex-Container.
Beispiel
So verwenden Sie Flex, um div-Elemente nebeneinander auszurichten:
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Ergebnis
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.
Try it Yourself »
Erfahren Sie mehr über Flex in unserem CSS-Flexbox-Tutorial.
Grid
Das CSS-Grid-Layout-Modul bietet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten, das die Gestaltung von Webseiten erleichtert, ohne Floats und Positionierungen verwenden zu müssen.
Klingt fast genauso wie Flex, kann aber mehr als eine Zeile definieren und jede Zeile einzeln positionieren.
Die CSS-Rastermethode erfordert, dass Sie die <div>-Elemente mit einem anderen <div>-Element umgeben und angeben Status als Rastercontainer, und Sie müssen die Breite jeder Spalte angeben.
Beispiel
So verwenden Sie ein Raster, um <div>-Elemente nebeneinander auszurichten:
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
Ergebnis
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.
Try it Yourself »
Erfahren Sie mehr über Grid in unserem CSS-Raster-Tutorial.
HTML-Tags
| Tag | Beschreibung |
|---|---|
| <div> | Definieren Sie einen Abschnitt in einem Dokument (Blockebene) |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
