CSS Responsive Elements (3-Spalter)

[DiDiJo]

Hi Leute,

ich würde gerne für eine Responsive-Webseite eine ganz einfach Galerie bauen in der Thumbnails nebeneinander stehen und aber einer gewissen Größe einfach umbrechen. Standartmäßig werden 3 Elemente pro Zeile angzeigt. IMG steht für einen Bildcontainer, [ X ] bzw. [ Z ] stehen für Spacer bzw. CLEAR-Elemente:

[IMG] [X] [IMG] [X] [IMG] [Z]
[IMG] [X] [IMG] [X] [IMG] [Z]

Wenn das Fenster etwas kleiner ist, sollen nur noch 2 Elemente angezeigt werden:

[IMG] [X] [IMG] [X] 
[IMG] [Z] [IMG] [X]
[IMG] [X] [IMG] [Z]

Und irgendwann nur noch ein Element pro Zeile:

[IMG] [X] 
[IMG] [X] 
[IMG] [Z] 
[IMG] [X]
[IMG] [X] 
[IMG] [Z]

Das ganze läuft schon mit 4 Elementen (irgendwann nur noch 2, danach 1 Element) wunderbar. Ich habe aber keine Ahnung wie ich das ganze für 3 Elemente vorbereiten kann, da ich ja theoretisch jeden Spacer / jedes Clear-Element anpacken müsste und ich nicht von einer Logik ausgehen kann.

P.S. jedes Spacer / Clear Element hätte auch noch die Klasse first, second, third, fourth etc.

Hat jemand vlt. ein Beispiel an dem man sich orientieren kann?

mfg DiDi

 

[SpiceLab]

Inline-Elemente, zu denen das <img>-Element zählt, folgen deinen Vorstellungen von Natur aus.

Ein zusätzliches "Clear"-Element, das am Zeilenende einen Zeilenumbruch erzwingt, ist somit im Markup nicht erforderlich, und anstelle des "Spacer"-Elements für den Abstand zwischen den Grafikelementen bietet CSS die margin-Eigenschaft.

Denkbar wäre hier als semantische HTML-Grundstruktur auch eine unsortierte Liste <ul>, deren Listenpunkte <li> mit display:inline-block formatiert sind, und darin die Bilder eingebettet werden.

Je nach Breite des Anzeigebereichs brechen die Elemente (in beiden Fällen) automatisch im Textfluß (vorzeitig) um.

Ansonsten dürften Media Queries for Standard Devices in Verbindung mit Multiple Columns für dich interessant sein.

Siehe auch Responsive Webdesign - Verwendung in CSS.