Test3: Unterschied zwischen den Versionen
Aus exmediawiki
Theo (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Theo (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 50: | Zeile 50: | ||
</div> | </div> | ||
<!-- Repeat Tile divs as needed --> | <!-- Repeat Tile divs as needed --> | ||
<!-- Tile 1 (Trigger Only) --> | |||
<div style="flex: 0 0 calc(20% - 1em); position: relative;"> | |||
<div class="mw-collapsible mw-collapsed"> | |||
<!-- Toggler (inside grid) --> | |||
<div class="mw-collapsible-toggle" style="float: none;"> | |||
<span class="down">[[File:Test image1.jpg|300x200px|center]]<br>Gestein</span> | |||
</div> | |||
<!-- Collapsible Content (outside of flex layout visually) --> | |||
<div class="mw-collapsible-content" style="margin-top: 1em; width: 100%; flex-basis: 100%; flex-grow: 1; display: block;"> | |||
<!-- Full-width container --> | |||
<div style="display: flex; gap: 1em; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; background: #f9f9f9; padding: 1em; border: 1px solid #ccc; border-radius: 6px;"> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- Tile 1 (Trigger Only) --> | |||
<div style="flex: 0 0 calc(20% - 1em); position: relative;"> | |||
<div class="mw-collapsible mw-collapsed"> | |||
<!-- Toggler (inside grid) --> | |||
<div class="mw-collapsible-toggle" style="float: none;"> | |||
<span class="down">[[File:Test image1.jpg|300x200px|center]]<br>Gestein</span> | |||
</div> | |||
<!-- Collapsible Content (outside of flex layout visually) --> | |||
<div class="mw-collapsible-content" style="margin-top: 1em; width: 100%; flex-basis: 100%; flex-grow: 1; display: block;"> | |||
<!-- Full-width container --> | |||
<div style="display: flex; gap: 1em; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; background: #f9f9f9; padding: 1em; border: 1px solid #ccc; border-radius: 6px;"> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
<div style="flex: 0 0 auto; text-align: center;"> | |||
[[File:Test image1.jpg|300x200px|link=Smoky Quartz]] | |||
<div style="margin-top: 0.5em;">[[Smoky Quartz]]</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="collapse-pre-one mw-collapsible"> | |||
<div class="mw-collapsible-toggle" style="float: none;"> | |||
<span class="down">[[File:Collapse-small-silver.png|12px|left|link=]] show less</span> | |||
<span class="up">[[File:Expand-small-silver.png|12px|left|link=]] show more</span> | |||
</div> | |||
<div class="mw-collapsible-content"> | |||
{{Lorem}} | |||
</div> | |||
</div> | </div> | ||
