Gleich hohe DIVs mit Flexbox

    Hallo an alle,


    ich habe 3 DIVs nebeneinander, die unterschiedlich hoch sind. Um die 3 DIVs ist nochmal ein DIV. Wenn ich dieses auf display:flex; stelle, sind alle 3 DIVs gleich hoch.

    Schön, dazu ist flex unter anderem ja auch da.

    Ich habe hier was gefunden, da sind auch die DIVs in der nächsten Zeile gleich hoch wie die in der ersten. https://comlounge.net/boxen-gleiche-hoehe-css-flexbox/

    Das ist bei mir aber leider nicht der Fall. Ich habe mit Mediaqueries Breakpoints gesetzt, wo ich aus den 3 DIVs 2 mache und das dritte in der nächsten Zeile ist dann wieder so groß wie sein Inhalt.

    Gibt's es eine Möglichkeit, dass sich das 3. dann auch an die erste Zeile anpasst? Oder ist das bei dieser Anleitung nur Zufall?


    Danke!

    Zitat

    Oder ist das bei dieser Anleitung nur Zufall?

    Ja, das ist Zufall und kommt dadurch zu Stande, dass die Texte in den beiden letzten Containern die selbe Höhe beanspruchen wie die längsten in den ersten drei. Verkürze ich die Texte mit dem HTML-Inspektor, schrumpfen die Container auch.

    Zitat

    Gibt's es eine Möglichkeit, dass sich das 3. dann auch an die erste Zeile anpasst?

    Nein, so eine Möglichkeit gibt es rein mit HTML und CSS nicht.


    In der Praxis ist das auch nicht sinnvoll und stört die Besucher eher. Zumal wenn die höchsten Container wie meist üblich durch Scrollen nicht mehr sichtbar sind. Dann stören die unsinnigen Leerräume und durch sie muss zudem unnötig gescrollt werden.


    Deshalb empfehle ich auch zum Testen richtige Inhalte und nicht viele Container mit immer dem gleichen Inhalt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden