Vorlage:3Spalten: Unterschied zwischen den Versionen
Aus Werkstatt schulentwicklung.digital
K (kat in noinclude) |
K (1 Version: Installation) |
Aktuelle Version vom 13. Juni 2017, 19:52 Uhr
- So sieht's aus
Spalte1
Spalte2
Spalte3
- Syntax;
{{3Spalten| Spalte 1 | Spalte 2 | Spalte 3 }}
Diese Vorlage sollte mit im CSS festgelegten Media Queries responsiv sein, so dass die Spalten auf schmalen Bildschirmen untereinander dargestellt werden. Folgendes müsste (anstelle der inline-Styles) ins CSS geschrieben werden: div.twocol{float:left;min-width:12em;padding:0 1% 0 0;width:49%} div.twocol + div.twocol{padding:0 0 0 1%} @media (max-width:73em ){ div.twocol div.twocol{min-width:100%;padding:0} } @media (max-width:50em ){ div.twocol{min-width:100%}div.twocol + div.twocol{padding:0} } @media (min-width:50em ){ div.threecol{display:flex} div.threecol > .flex-item{flex:1 1 auto;width:100vw;margin:0 1em 0 0} div.threecol > .flex-item:last-child{margin:0} } |