Hilfe:Spalten: Unterschied zwischen den Versionen

Aus RMG-Wiki
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Zeile 47: Zeile 47:




;Syntax:
  <nowiki>{{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  }} 
</nowiki>
== Flexible 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.

Version vom 3. März 2024, 21:16 Uhr

2 Spalten

Soll ein Video in einem 2-Spalten Layout eingebunden werden, empfiehlt sich eine Breite von 460 Pixeln. Außerdem sollte es ebenfalls mittig ausgerichtet sein, damit es auf kleinen Displays gut angezeigt wird.

Syntax
{{2Spalten
|
Soll ein Video in einem 2-Spalten Layout eingebunden werden, empfiehlt sich eine Breite von 460 Pixeln. Außerdem sollte es ebenfalls mittig ausgerichtet sein, damit es auf kleinen Displays gut angezeigt wird.

|
{{#ev:youtube|lJnQChnv1T4|460|center}}
}}

3 Spalten

Spalte 1



Syntax
{{3Spalten
|
Spalte 1
|
Spalte 2
|
{{LearningApp|app=pqbhije8201|width=100%|height=400px}}
}}

Spalte 2



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-2
width-1-2

Beispiel 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-3
width-1-3
width-1-3

Beispiel 3

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