Hilfe:Spalten: Unterschied zwischen den Versionen
Aus ZUM Projektwiki
Keine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
Keine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 5: | Zeile 5: | ||
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. | 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. | ||
'''Beispiel 1 ''' | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<div class="grid"> | <div class="grid"> | ||
<div class="width-1- | <div class="width-1-2">...</div> | ||
<div class="width-1- | <div class="width-1-2">...</div> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<div class="grid"> | <div class="grid"> | ||
<div class="width-1- | <div class="width-1-2"><div style="background: #eee; padding: 1rem"><code>width-1-2</code></div></div> | ||
<div class="width-1- | <div class="width-1-2"><div style="background: #eee; padding: 1rem"><code>width-1-2</code></div></div> | ||
</div> | </div> | ||
'''Beispiel 2 ''' | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<div class="grid"> | <div class="grid"> | ||
<div class="width-1- | <div class="width-1-3">...</div> | ||
<div class="width-1- | <div class="width-1-3">...</div> | ||
<div class="width-1-3">...</div> | |||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<div class="grid"> | <div class="grid"> | ||
<div class="width-1- | <div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>width-1-3</code></div></div> | ||
<div class="width-1- | <div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>width-1-3</code></div></div> | ||
<div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>width-1-3</code></div></div> | |||
</div> | </div> | ||
'''Beispiel 3 ''' | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<div class="grid"> | <div class="grid"> | ||
| Zeile 41: | Zeile 42: | ||
<div class="grid"> | <div class="grid"> | ||
<div class="width-1-6"><div style="background: #eee; padding: 1rem"><code> | <div class="width-1-6"><div style="background: #eee; padding: 1rem"><code>width-1-6</code></div></div> | ||
<div class="width-5-6"><div style="background: #eee; padding: 1rem"><code> | <div class="width-5-6"><div style="background: #eee; padding: 1rem"><code>width-5-6</code></div></div> | ||
</div> | </div> | ||
== 2 Spalten == | |||
Version vom 7. Februar 2019, 23:51 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.
Beispiel 1
<div class="grid">
<div class="width-1-2">...</div>
<div class="width-1-2">...</div>
</div>
width-1-2width-1-2Beispiel 2
<div class="grid">
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
</div>
width-1-3width-1-3width-1-3Beispiel 3
<div class="grid">
<div class="width-1-6">...</div>
<div class="width-5-6">...</div>
</div>
width-1-6width-5-6
