• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fluides Layout (left, center, right)

cartman

Neues Mitglied
Hallo an alle,

ich habe eine Aufgabe und komme einfach nicht weiter.

Und zwar möchte ich ein fluides 3-Spaltiges Layout erstellen.
Ich möchte eine Bildergalerie, bei der ich pro Zeile immer 1-3 Bilder platzieren kann.
Die Möglichkeiten einer Platzierung pro Zeile sollen left, center und right sein.

Ich habe hier mal ein Beispiel vorbereitet:
http://jsfiddle.net/wSd32/182/

Die Schwierigkeit liegt nun jedoch darin, dass ich das ganze fluid haben möchte. In meinem Beispiel sieht man, wie die Bilder bei Verkleinerung des Browserfensters näher zusammen rücken (so will ich das auch) nur leider irgendwann unschön übereinanderlappen.
Ich hätte gerne, dass die Bilder genau wie bei einem einfachen float:left; sobald sie sich berühren umbrechen und in eine neue Zeile rutschen. Also, dass das Bild rechts eine Zeile runterbricht, jedoch weiterhin rechts floatet - dh. man hätte eine Zeile in der left und center leer sind.

Wie macht man das am besten bzw. geht das überhaupt?
Ich hoffe man versteht mich und dass ihr mir irgendwie helfen könnt :-)

Vielen Dank auf jeden Fall schon mal!
 
Werbung:
Hallo,

da du sinnvollerweise schon HTML5 benutzt solltest du die Bildergröße per CSS flexibel gestalten und ein "Responsive Design" erstellen.

Gruss

MrMurphy
 
Ich habe bei meinem Beispiel leider nicht bedacht, dass die Bildbreite nicht immer 200px sein muss sondern immer unterschiedlich. Sorry dafür.
Responsiv macht hier also keinen Sinn.
 
Werbung:
Zurück
Oben