W3.CSS- Layout
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
W3.CSS-Layoutklassen
W3.CSS Version 2.90 / 2.91 führte die folgenden Klassen für "spaltenartiges" Layout ein:
| Klasse | Beschreibung |
|---|---|
| w3-Zelle-Zeile | Behälter für Zellen (Spalten). |
| w3-Zelle | Layoutzelle (Spalte). |
| w3-cell-top | Richtet den Inhalt am oberen Rand einer Zelle (Spalte) aus. |
| w3-Zelle-Mitte | Richtet den Inhalt an der vertikalen Mitte einer Zelle (Spalte) aus. |
| w3-Zelle-unten | Richtet den Inhalt am unteren Rand einer Zelle (Spalte) aus. |
| w3-mobil | Fügt einer Zelle (Spalte) Mobile-First-Reaktionsfähigkeit hinzu. Zeigt Elemente als Blockelemente auf Mobilgeräten an. |
Die Layoutklassen ersetzen veraltete Layoutklassen.
Die neuen Layout Classer sind vielseitiger und einfacher zu bedienen.
Die veralteten Layoutklassen sind unten auf dieser Seite aufgeführt.
HTML-Block-Elemente
Ursprünglich werden HTML-Blockelemente (wie <div>-Elemente) als vertikale Blöcke angezeigt:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Layout-Zellen
Die Klasse w3-cell definiert Blockelemente so, dass sie horizontal angezeigt werden (wie Tabellenzellen):
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Layout-Container
Die w3-cell-row ist ein Container für Zellen (Spalten).
Die Breite des Containers w3-cell-row definiert die Gesamtbreite aller enthaltenen Zellen.
Die Standardbreite beträgt 100 %:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Wenn Sie die Breite des Zellcontainers ändern, wird die Gesamtbreite der enthaltenen Zellen verringert:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Layoutzellen passen sich selbst an
Die W3-Zellen- Klasse hat einen sehr schönen eingebauten selbstregulierenden Standard. Side-by-Side-Elemente passen sich automatisch an die erforderliche Breite an:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout. Hallo W3.CSS-Layout.
Beispiel
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Layoutzellen werden auf gleiche Höhe angepasst
Nebeneinander angeordnete w3-Zellen- Elemente passen sich ebenfalls automatisch an die gleiche Höhe an:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Responsives Layout
Die Klasse w3-mobile fügt jedem HTML-Element Mobile-First-Responsiveness hinzu.
Zusammen mit w3-cell werden die Layoutspalten auf kleinen Bildschirmen/Mobiltelefonen vertikal und auf mittleren/großen Bildschirmen horizontal angezeigt.
Auf mittleren und großen Bildschirmen:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Auf kleinen Bildschirmen:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Einfache Ausrichtung
Die Klasse w3-cell macht es sehr einfach, Text auszurichten.
Es gibt 3 verschiedene Ausrichtungsklassen:
- w3-cell-top (Standard)
- w3-Zelle-Mitte
- w3-Zelle-unten
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
Die Klasse w3-cell-row dehnt die Elemente auf die Seitenbreite aus:
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Hallo W3.CSS-Layout.
Beispiel
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Veraltete W3.CSS-Tabellenlayoutklassen
| w3-Layout-Container | Verwenden Sie stattdessen w3-cell-row. |
| w3-Layout-Zeile | |
| w3-Layout-Zelle | Verwenden Sie stattdessen w3-cell. |
| w3-Layout-oben | Verwenden Sie stattdessen w3-cell-top. |
| w3-Layout-Mitte | Verwenden Sie stattdessen w3-cell-middle. |
| w3-Layout-unten | Verwenden Sie stattdessen w3-cell-bottom. |
| w3-Layout-Spalte | Verwenden Sie stattdessen w3-mobile. |
Veraltete Klassen werden in Version 4.0 aus W3.CSS entfernt.