Test3: Unterschied zwischen den Versionen
Aus exmediawiki
Theo (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Theo (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; width: 100%;"> | <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; width: 100%;"> | ||
<!-- First | <!-- First collapsible item --> | ||
<div style="flex: 0 0 calc(25% - 1em); | <div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;"> | ||
<div class="mw-collapsible-toggle" style="float: none; text-align: center;"> | |||
<div class="mw-collapsible-toggle" style="float: none; text-align: center | |||
<span class="down"> | <span class="down"> | ||
'''Gestein'''<br> | '''Gestein'''<br> | ||
| Zeile 11: | Zeile 9: | ||
</span> | </span> | ||
</div> | </div> | ||
<div class="mw-collapsible-content" style=" | <div class="mw-collapsible-content" style="position: relative; width: 100vw; left: calc(-25% - 1em); margin-top: 1em;"> | ||
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;"> | |||
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9 | |||
<!-- Image Block Start --> | <!-- Image Block Start --> | ||
<div style="flex: 0 0 calc(20% - 1em);"> | <div style="flex: 0 0 calc(20% - 1em);"> | ||
| Zeile 99: | Zeile 36: | ||
</div> | </div> | ||
<!-- | <!-- Second collapsible item --> | ||
<div class="mw-collapsible mw-collapsed" | <div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;"> | ||
<div class="mw-collapsible-toggle" style=" | <div class="mw-collapsible-toggle" style="float: none; text-align: center;"> | ||
<span>Mineralien | <span class="down"> | ||
'''Mineralien'''<br> | |||
[[File:Test image2.jpg|150px|link=Amethyst]] | |||
</span> | |||
</div> | </div> | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content" style="position: relative; width: 100vw; left: calc(-50% - 1em); margin-top: 1em;"> | ||
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9 | <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;"> | ||
<!-- Image Block Start --> | <!-- Image Block Start --> | ||
<div style="flex: 0 0 calc(20% - 1em);"> | <div style="flex: 0 0 calc(20% - 1em);"> | ||
| Zeile 123: | Zeile 63: | ||
</div> | </div> | ||
<!-- | <!-- Third collapsible item --> | ||
<div class="mw-collapsible mw-collapsed" | <div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;"> | ||
<div class="mw-collapsible-toggle" style=" | <div class="mw-collapsible-toggle" style="float: none; text-align: center;"> | ||
<span>Fossilien | <span class="down"> | ||
'''Fossilien'''<br> | |||
[[File:Test image3.jpg|150px|link=Fossil]] | |||
</span> | |||
</div> | </div> | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content" style="position: relative; width: 100vw; left: calc(-75% - 1em); margin-top: 1em;"> | ||
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9 | <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;"> | ||
<!-- Image Block Start --> | <!-- Image Block Start --> | ||
<div style="flex: 0 0 calc(20% - 1em);"> | <div style="flex: 0 0 calc(20% - 1em);"> | ||
| Zeile 143: | Zeile 86: | ||
</div> | </div> | ||
<!-- | <!-- Fourth collapsible item --> | ||
<div class="mw-collapsible mw-collapsed" | <div class="mw-collapsible mw-collapsed" style="flex: 0 0 calc(25% - 1em); margin-bottom: 1em;"> | ||
<div class="mw-collapsible-toggle" style=" | <div class="mw-collapsible-toggle" style="float: none; text-align: center;"> | ||
<span>Edelsteine | <span class="down"> | ||
'''Edelsteine'''<br> | |||
[[File:Test image4.jpg|150px|link=Diamond]] | |||
</span> | |||
</div> | </div> | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content" style="position: relative; width: 100vw; left: calc(-100% - 1em); margin-top: 1em;"> | ||
<div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9 | <div style="display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; padding: 1em; border: 1px solid #ddd; background-color: #f9f9f9;"> | ||
<!-- Image Block Start --> | <!-- Image Block Start --> | ||
<div style="flex: 0 0 calc(20% - 1em);"> | <div style="flex: 0 0 calc(20% - 1em);"> | ||
| Zeile 165: | Zeile 111: | ||
</div> | </div> | ||
<!-- | <!-- This is a spacer div that ensures content below gets pushed down --> | ||
<div style="width: 100%; clear: both; margin-bottom: 2em;"></div> | |||