JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="ohei2, post: 15052, member: 5796"] Ich habe nun schließlich ein funktionierendes Grid mit dem gewünschten Effekt (Text bleibt rechts neben dem Bild) hinbekommen. [code=html] <div id="imagegrid"> <div id="ig-image">[[File:Blisterdeckel für Blisterstange (Bund MH 22).jpg|450px|center|Blisterdeckel für Blisterstange (Bund MH 22)]]</div> <span class="mw-quelle-vertikal"><div id="ig-source">Quelle: Felzmann 183</div></span> <center><div id="ig-caption">Blisterdeckel für Blisterstange (Bund MH 22)</div></center> </div> [/code] [code=css] #imagegrid { margin: 0 0 0 3%; display: grid; /* grid-template-rows: repeat(2, 1fr); */ grid-template-rows: min-content min-content; grid-template-columns: auto min-content; /* grid-template-columns: repeat(2, 1fr); */ grid-column-gap: 5px; grid-row-gap: 5px; align-items: center; justify-content: center; } #ig-image { grid-area: 1 / 1 / 2 / 2; } #ig-caption { grid-area: 2 / 1 / 3 / 2; } #ig-source { grid-area: 1 / 2 / 3 / 3; } [/code] Diese Lösung funktionierte zunächst nicht fürs Handy. Das Bild wurde nicht skaliert and rutschte beidseitig aus dem Viewport, das heißt links wurde es abgeschnitten, da man nach links nicht scrollen kann. Ich war praktisch schon am Aufgeben, Dann habe ich mein ursprüngliches "[I]grid-template-columns: max-content min-content;[/I]" mit "[I]grid-template-columns: auto min-content;[/I]" ersetzt und jetzt klappt es wie gewünscht. Ist sicherlich insgesamt nicht die eleganteste Lösung, aber es scheint ohne Nebenwirkungen zu funktionieren. Zu finden hier www . markenheftchen . info /mw/Benutzer:T1qj7p/TestseiteCSS Was mich beinahe zur Verzweiflung gebracht hat: Wenn ich kein [I]center [/I]Tag für id-caption verwende, bleibt die Bildunterschrift hartnäckig linksbündig, trotz der center Formatierungen im Grid Element. Was für ein Gefrickel. :rolleyes: Wieviel Zeit ich jetzt wieder in ein solches Detail investiert habe, verschweige ich mal lieber. Nochmals danke für Deine Hilfestellung. Gruß Oliver [/QUOTE]

Authentifizierung