Hilfe:Tabellen: Unterschied zwischen den Versionen

Aus ZUM Deutsch Lernen
deutsch-lernen>FrauSchütze
(Die Seite wurde neu angelegt: „{{Hilfe Navigation}} == Intelligente Spalten == Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinan…“)
 
deutsch-lernen>Retemirabile
KKeine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
{{Hilfe Navigation}}
{{Hilfe Navigation}}
== Intelligente Spalten ==  
== Flexible Spalten ==  
Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.
Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.
Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.  
Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.  
Um die Inhalte in einer Spalte anzuordnen, schreibt man sie an die Stelle der drei Punkte (…) in den folgenden Beispielen. Dabei kann man auch Absätze, Listen, Tabellen etc. verwenden. 


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">

Version vom 3. November 2018, 10:40 Uhr

Flexible Spalten

Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an. Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.

Um die Inhalte in einer Spalte anzuordnen, schreibt man sie an die Stelle der drei Punkte (…) in den folgenden Beispielen. Dabei kann man auch Absätze, Listen, Tabellen etc. verwenden.

<div class="grid">
 <div class="width-1-3">...</div>
 <div class="width-1-3">...</div>
 <div class="width-1-3">...</div>
</div>
.width-1-3
.width-1-3
.width-1-3
<div class="grid">
 <div class="width-1-2">...</div>
 <div class="width-1-2">...</div>
</div>
.width-1-2
.width-1-2
<div class="grid">
 <div class="width-1-4">...</div>
 <div class="width-3-4">...</div>
</div>
.width-1-6
.width-5-6