Wie kann man 3 nebeneinander liegende Fotos mit Text rekursiv gestalten

    Hallo liebe Experten,

    als absoluter Laie und immer gerne dazu Lernender wollt ich fragen, ob mir jemand hierbei helfen könnte:

    Ich habe 9 Fotos mit Text darunter.
    Diese Fotos werden auf einem PC-Monitor jeweils Dreierweise nebeneinander angezeigt.
    Wenn sich allerdings jemand die Fotos auf einem Handy anschaut sind dort natürlich Fotos und Text komplett durcheinander.
    Früher konnte ich das in HTML mittels einer Tabelle lösen. Ich denke aber, dass es eine einfacher Möglichkeit hierfür gibt.

    Die Life-Ansicht ist hier zu finden:
    https://www.mcv-moemlingen.de/2018-2019-unsere-tollitaeten

    Dies ist mein Quelltext, der durch das manuelle Ausrichten leider im Joomla! so erzeugt wurde:

    HTML
    <p>&nbsp;</p><p style="text-align: center;"><span style="font-family: arial, helvetica, sans-serif; font-size: 36pt; color: #ff0000;">Tollitäten 2018 / 2019</span></p><p>&nbsp;</p><p style="text-align: center;"><img style="margin: 5px auto; display: block;" src="images/mcv2019/Tollitaeten_2018-2019/Tollitaeten_2018-19_800x544.JPG" alt="Tollitaeten 2018 19 800x544" /></p><p style="text-align: center;">&nbsp;v.l.n.r.:&nbsp;</p><p style="text-align: center;">oben: <strong>Heribert I., Horst III., Heiko I., Helmut III. Uwe I., Martin I., Bernd I., Matz I., Robbi I.</strong></p><p style="text-align: center;">unten: <strong>Petra I., Christina I., Christine I., Petra III., Sandra I., Petra II., Sabine I., Belinda I.&nbsp;</strong></p><p style="text-align: center;">auf dem Foto fehlt: <strong>Gisela I.&nbsp;</strong></p><p>&nbsp;</p><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2008-2009_Heribert_Petra_267x400.JPG" alt="2008 2009 Heribert Petra 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2010_Uwe_Gisela_267x400.JPG" alt="2010 Uwe Gisela 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2012_Heiko_Tine_267x400.JPG" alt="2012 Heiko Tine 267x400" /></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2008 / 2009&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2010&nbsp; (Archivfoto)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2012&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp;<strong>Heribert I. und Petra I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Uwe I. und Gisela I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Heiko I. und Christine I.&nbsp;</strong></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; (Heribert Dietrich und Petra Hartmann)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Uwe und Gisela Büchler)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Heiko und Christine Lazarus)&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2013_Bernd-Petra_267x400.JPG" alt="2013 Bernd Petra 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2014_Martin_Sandra_267x400.JPG" alt="2014 Martin Sandra 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2015_Belinda_Robbi.JPG" alt="2015 Belinda Robbi" /></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2013&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2014&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2015&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<strong>Bernd I. und Petra II.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Martin I. und Sandra I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Robbi I. und Belinda I.&nbsp;</strong>&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Ehepaar Bernd und Petra Giegerich)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Martin und Sandra Faust)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Robert und Belinda Hartmann)&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2016_Matz_Sabine_267x400.JPG" alt="2016 Matz Sabine 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2017_Horst_Christina_267x400.JPG" alt="2017 Horst Christina 267x400" />&nbsp;<img src="images/mcv2019/Tollitaeten_2018-2019/2018_Helmut_Petra_267x400.JPG" alt="2018 Helmut Petra 267x400" /></p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2016&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2017&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2018&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<strong>Matz I. und&nbsp; Sabine I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Horst III. und Christina I.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Helmut III. und Petra III.&nbsp;</strong>&nbsp;&nbsp;</p><p style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Matthias Ritter und Sabine Lieb)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Horst und Christina Feyrer)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Ehepaar Helmut und Petra Gollas)&nbsp;</p><p style="text-align: center;">&nbsp;</p><p style="text-align: center;">&nbsp;</p>


    Es wäre nett, wenn mir jemand weiterhelfen könnte.

    Viele Grüße
    Kurt

    Schau dir mal flexbox an https://blog.kulturbanause.de/2013/07/einfuh…modell-von-css/
    und @mediqueries https://blog.kulturbanause.de/2011/04/websit…-co-optimieren/

    Damit kann man sowas ganz gut regeln.
    Tabellen layout wahr damals vieleicht gut dafür. Auch heute würde das noch gehen aber macht man eigentlich nicht mehr. Deswegen versuch dein glück mal mit Flexbox und wenn du nicht weiter kommst helfe ich dir

    Ich habe es jetzt mal wie folgt probiert:

    In der css-Datei steht folgendes:

    Code
    [COLOR=#D7BA7D][FONT=Consolas].flex-container[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas] {[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]  [COLOR=#9cdcfe]display[/COLOR]: [COLOR=#ce9178]flex[/COLOR];
  [COLOR=#9cdcfe]justify-content[/COLOR]: [COLOR=#ce9178]space-between[/COLOR];
[/FONT][/COLOR]
[COLOR=#D4D4D4][FONT=Consolas]}[/FONT][/COLOR]


    Mein HTML-code sieht wie folgt aus:

    HTML
    <div class="flex-container">  <div class="flex-item"><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2008-2009_Heribert_Petra_267x400.JPG" alt="2008 2009 Heribert Petra 267x400" /></p><p style="text-align: center;"><strong>Heribert I. und Petra I.</strong></p><p style="text-align: center;">(Heribert Dietrich und Petra Hartmann)</p></div>  <div class="flex-item"><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2010_Uwe_Gisela_267x400.JPG" alt="2010 Uwe Gisela 267x400" /></p><p style="text-align: center;"><strong>Uwe I. und Gisela I.</strong></p><p style="text-align: center;">(Ehepaar Uwe und Gisela Büchler)</p></div>  <div class="flex-item"><p style="text-align: center;"><img src="images/mcv2019/Tollitaeten_2018-2019/2012_Heiko_Tine_267x400.JPG" alt="2012 Heiko Tine 267x400" /></p><p style="text-align: center;"><strong>Heiko I. und Christine I.</strong></p><p style="text-align: center;">(Ehepaar Heiko und Christine Lazarus)</p></div></div>

    Trotzdem erscheinen die DIVs immer unter anstatt nebeneinander.

    Auch mit dem "float" im css hat sich nichts geändert:

    Code
    [COLOR=#D7BA7D][FONT=Consolas].flex-container[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas] {[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]  [COLOR=#9cdcfe]display[/COLOR]: [COLOR=#ce9178]flex[/COLOR];
  [COLOR=#9cdcfe]justify-content[/COLOR]: [COLOR=#ce9178]space-between[/COLOR];
}


[COLOR=#d7ba7d].flex-item[/COLOR] {
  [COLOR=#9cdcfe]float[/COLOR]: [COLOR=#ce9178]left[/COLOR];
[/FONT][/COLOR]
[COLOR=#D4D4D4][FONT=Consolas]}[/FONT][/COLOR]

    Wo liegt mein Fehler?


    EDIT: Funktioniert doch, musste nur den Browser Cache löschen!

    VIELEN DANK!

    Einmal editiert, zuletzt von Kurtus (19. November 2018 um 18:40)

    schön.
    Aber hast du float wieder rausgenommen nach der Cache löschen ? Weil float brauch man bei flexbox eigentlich nicht mehr.

    Ps:
    Dies hier

    Code
    [COLOR=#000080]<p style=[COLOR=#0000FF]"text-align: center;>[/COLOR][/COLOR]


    Könntest du überall rausnehmen und in der Css den <p> zuordnen ,bzw erstellst du eine Klasse dafür. Weil Inline Styls ist nicht mehr so aktuell