Resp. Boxen und auch noch unterschiedlich viele Spalten
Verfasst: 09.09.2013, 19:31
Hallo,
ich möchte ein auf Boxen basierendes Layout entwerfen, das auch noch responsive ist.
Es handelt sich z. B. über eine Produkt-Übersicht, wo jedes Produkt eine Box mit Titel, Foto, Teaser und Link hat...
also praktisch
Nun möchte ich, dass das Layout je nach Bildschirmgröße umbricht..
Gehen wir davon aus, dass es 6 Produkte auf der Seite gibt.
Auf großen Displays sollen es 3 Spalten und entsprechend 2 Zeilen geben.
Auf mittleren Displays soll es 2 Spalten und entsprechend 3 Zeilen geben.
Bei kleinen Displays sollen alle Boxen untereinander angezeigt werden.
Das Problem ist, dass die Boxen unterschiedlich hoch sind und mangels Wrapper (der ja bei dieser Art des Layouts schlecht möglich ist) nicht einfach am Elternelement ausgerichtet werden können.
Habt Ihr eine idee, wie ich sowas bewerkstelligen kann? Die Zeit für flexboxen ist wohl immer noch nicht reif...
Wie würdet ihr sowas angehen?
Viele Grüße!
ich möchte ein auf Boxen basierendes Layout entwerfen, das auch noch responsive ist.
Es handelt sich z. B. über eine Produkt-Übersicht, wo jedes Produkt eine Box mit Titel, Foto, Teaser und Link hat...
also praktisch
Code: Alles auswählen
<div>
<h2>Titel<h2>
<img src... />
Blabla tolles Produkt blubblub
<a href="">Link</a>
</div>
Gehen wir davon aus, dass es 6 Produkte auf der Seite gibt.
Auf großen Displays sollen es 3 Spalten und entsprechend 2 Zeilen geben.
Auf mittleren Displays soll es 2 Spalten und entsprechend 3 Zeilen geben.
Bei kleinen Displays sollen alle Boxen untereinander angezeigt werden.
Das Problem ist, dass die Boxen unterschiedlich hoch sind und mangels Wrapper (der ja bei dieser Art des Layouts schlecht möglich ist) nicht einfach am Elternelement ausgerichtet werden können.
Habt Ihr eine idee, wie ich sowas bewerkstelligen kann? Die Zeit für flexboxen ist wohl immer noch nicht reif...
Wie würdet ihr sowas angehen?
Viele Grüße!