[HTML / CSS] Div Container immer gleich groß

LeijaT · 18. Juli 2016

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.

IPrototypeI · 18. Juli 2016

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

LeijaT · 18. Juli 2016

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

Alf21 · 18. Juli 2016

Warum nicht ne Simple Tabelle und dann statt divs die <td> nutzen Man kann die mit Bootstrap verbinden und gibt paar CSS3 Möglichkeiten, ist aber relativ kompliziert.

Zentrieren: div { text-align: center; }

IPrototypeI · 18. Juli 2016

ich kann da Alf nur zupflichten auf der anderen Seite mit den div element eventuell könnte display:inline-table; die Lösung auch sein.

Edgar · 18. Juli 2016

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:

Code

<style>
	.group {
		max-height: 250px;
		max-width: 1240px;
		width: 100%;
		margin: auto;
	}


	.group div {
		max-width: 50%;
		width: 100%;
		float: left;
		max-height: 50%;
		height: 100%;
	}


</style>


<div class="group">
	<div style="background: red;">Text text</div>
	<div style="background: blue;">Text Text</div>
	<div style="background: blue;">Text<br>text</div>
	<div style="background: red;">Text<br>text<br>text</div>
</div>

Alles anzeigen

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.

LeijaT · 18. Juli 2016

Habs hinbekommen, trotzdem danke

C3O · 24. Juli 2016

Zitat von LeijaT

Habs hinbekommen, trotzdem danke

Wäre für manche bestimmt interessant, wie du es gelöst hast.

Also ich würde dir

Code

display: table;

und

CSS

display: table-cell;

empfehlen.

[HTML / CSS] Div Container immer gleich groß

breadfish.de 12. März 2022

Ähnliche Themen

Totgesagte leben länger : xLife - Bitte dreh die Zeit zurück

(K)eine Alternative für Deutschland - 2016!