[HTML / CSS] Div Container immer gleich groß

    Hallo zusammen, ich versuche momentan 4 verschiedene Div-Container so anzubringen, dass sie IMMER der gleichen Größe entsprechen, egal welcher Inhalt in den einzelnen Containern ist.


    Ich habe also quasi:



    HTML
    <div class="c1">Hier ein Text</div>
<div class="c2">Dort ein Text</div>
<div class="c3">Hier ein <br />Zeilenumbruch</div>
<div class="c4">Hier<br />sogar<br />zwei!</div>

    Diese 4 Container sind so angelegt, dass jeweils 2 nebeneinander und untereinander sind, sich also sozusagen ein Viereck aus den 4 Containern bildet.
    Jetzt habe ich allerdings die Schwierigkeit, dass sich alle 4 Container an der Höhe des höchsten Containers anpassen sollen und der Text in allen Containern vertikal mittig dargestellt werden soll.


    Wie lässt sich das umsetzen?


    / Edit: Alternativ kann ich die Größe der Div-Container auch konstant lassen, bräuchte dann aber eine Möglichkeit, dass sich die Schriftgröße in den Containern variabel zum Inhalt vergrößert/verkleinert.

    Twitch.tv/LeijaT


    Mein CS:GO Server: 62.75.168.39:27016


    Ich bin so hungrig, dass ich vor lauter Durst nicht weiß, was ich rauchen soll - so müde bin ich!
    Freedom is just another word for 'Nothing left to lose'

    Css3 bietet die Möglichkeit nun die größe vw anzugeben. Diese orientiert sich an dem sichtbereich (viewport width), jedoch
    unterstützt das nicht jeder browser


    https://css-tricks.com/viewport-sized-typography/


    Alternativ kannst du die größe der font per media-query setzen.


    Damit die boxen immer die selbe größe haben je nach screen angepasst musst du relative angaben nutzen entweder mit
    width:20%;
    Oder das setzen der maximalen breite
    max-width:20%
    Ich hoffe ich konnte dir damit etwas helfen

    Nein, ich glaube ich habe mich falsch ausgedrückt.
    Mir geht es nicht darum, dass sich die Boxen dem Screen anpassen, sondern dem Inhalt.
    Je mehr Text in einer Divbox stecken, desto höher wird diese natürlich (das ist auch nicht problematisch umzusetzen).
    Allerdings habe ich 4 dieser Divboxen, die sich immer an der Höhe der Divbox mit dem meisten Inhalt orientieren sollen.


    Wenn in eine dieser Boxen nun längerer Text steht, wird diese ja automatisch höher als die anderen, das sieht allerdings hässlich aus, weshalb die anderen Boxen
    sich in ihrer Höhe mit erweitern sollen, auch wenn weniger Text drin steht.


    / Hab's jetzt unnötig über jQuery gelöst. Jetzt muss ich nur den den Text vertikal zentriert kriegen :o

    Twitch.tv/LeijaT


    Mein CS:GO Server: 62.75.168.39:27016


    Ich bin so hungrig, dass ich vor lauter Durst nicht weiß, was ich rauchen soll - so müde bin ich!
    Freedom is just another word for 'Nothing left to lose'

    • Offizieller Beitrag

    Normalerweise hätte ich auch eine Tabelle oder ein Gridsystem vorgeschlagen.


    Solltest du aber wirklich Divs nutzen müssen hätte ich eine Möglichkeit, jedoch wird hier der Kompromiss eingegangen, dass
    alle 4 Divs die maximale höhe erreichen.


    Sieht dann folgendermaßen aus:
    https://i.gyazo.com/c2d7a9d4a96dfd7ee8be3a9b70b80b63.png


    Ist aber echt keine schöne Lösung. Ansonsten, hier ist der CSS und HTML Teil:


    Aber wie schon erwähnt, lieber Tabellen oder ein Gridsystem (gibt viele kostenlose im weiten Internet) benutzen.


    Edit: Das ganze muss natürlich nicht auf der ganzen Seite sein:


    https://i.gyazo.com/7c9bf0b77b59ef4a570452dd7f992112.png


    Dafür dann unter .group eine höhe definieren.