Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

Resp. Boxen und auch noch unterschiedlich viele Spalten

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
umwelt
PostRank 6
PostRank 6
Beiträge: 386
Registriert: 16.11.2011, 22:06

Beitrag von umwelt » 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

Code: Alles auswählen

<div>
<h2>Titel<h2>
<img src... />
Blabla tolles Produkt blubblub
<a href="">Link</a>
</div>
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!

SloMo
PostRank 10
PostRank 10
Beiträge: 4880
Registriert: 04.01.2005, 18:26

Beitrag von SloMo » 10.09.2013, 08:58

Vielleicht inspiriert Dich das: https://masonry.desandro.com/

Ansonsten könntest Du auch ganz ohne JS ein Multi-Column DIV nehmen und alle anderen Blöcke als Inline-Blick darin aufnehmen. Die Spaltenzahl könnte per Media-Query an die Bildschirmbreiten angepasst werden. Dann ist die Reihenfolge allerdings etwas strange. Den IE darf man wie immer dabei auch nicht vergessen. Ich bin aber kein HTML/CSS-Experte, insofern ist das nur so ein Gedankengang ohne Gewähr.

umwelt
PostRank 6
PostRank 6
Beiträge: 386
Registriert: 16.11.2011, 22:06

Beitrag von umwelt » 10.09.2013, 19:47

Danke, das sieht interessant aus, ist aber wohl noch nicht genau das, was ich suche!

Pretender
PostRank 9
PostRank 9
Beiträge: 1081
Registriert: 22.04.2004, 14:44
Wohnort: Naumburg

Beitrag von Pretender » 17.10.2013, 10:56

So etwas?

@media screen and (max-width: 600px) {

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag