• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Fluides Layout (left, center, right)

C

cartman23

New member
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:
Edit fiddle - JSFiddle

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!
 
Erst mal vielen Dank für die superschnelle Antwort!!!

Leider ist das noch nicht ganz die Lösung (war aber auch mein Fehler). Denn ich habe nicht dazu gesagt, dass die width immer unterschiedlich ist (nicht wie im Beispiel immer 200px).
Außerdem floatet das Grüne Bild bei mir nach links. Ich hätte gerne, dass es nach umbruch weiterhin right floatet.
 
hmmm, schwierig. flexbox-Properties könnten vielleicht abhelfen, aber so ganz verstehe ich nicht, wieso so eine galerie überhaupt verschiedene bildgrößen hat und wie das dann aussehen soll...
 
Ich habe mir fast schon gedacht, dass das nicht einfach per CSS möglich sein wird. Dennoch ein Danke für jede Hilfe!

Vielleicht könnt ihr mir aber eine andere Frage beantworten (ähnliches Thema).

Auch hierfür habe ich was vorbereitet:
Edit fiddle - JSFiddle

Die ersten drei Bilder machen GENAU das was ich möchte. Sie "floaten center" und sitzen mit der Unterkante auf einer Linie.
Packe ich die Bilder jedoch in ein div, brechen sie sofort um, was ich nicht möchte. (Ich brauche sie aber in separaten div's).

Kann mir da einer helfen?
 
Warum brauchst du sie in separaten <div>s? Wenn du keinen Zeilenumbruch willst, nimm doch ein inline-Element (z.B. ein <span>)...
 
Deins
Code: 
.fluid_center { 
    margin:0 auto; 
    text-align:center; 
    padding-left:5px; 
    padding-top:5px; 
    padding-right:5px; 
    padding-bottom:5px; 
}
Meins
Code: 
.fluid_center{ 
    text-align:center; 
    padding:5px; 
}
Wenn ein Block-Element keine Breitenangabe hat, ist ein margin:0 auto völlig sinnfrei, denn es nimmt sich automatisch 100%.
Somit kann es wegfallen.
Dann zählt man in folgender Reihenfolge: top, right, bottom, left (Uhrzeigersinn von oben).
Bevor Du komplizierte Konstrukte bauen willst, konzentriere Dich erstmal auf die Basics.
Frohes Neues ...
 
dkdenz schrieb:
Wenn ein Block-Element keine Breitenangabe hat, ...
Zum Vergrößern anklicken....

Ich weiß du meinst es nur gut, aber das ist ein Codeschnipsel den ich für den Präsentationszweck in jsfiddle ge-copy-pasted habe …
Für mein Beispiel hier wäre z.B. auch grundsätzlich schon mal kein Padding nötig gewesen, wenn man mal genau darüber nachdenkt.

Ich weiß du meinst es gut, aber mir wäre viel eher mit der Lösung der eigentlichen Frage geholfen. Hast du denn darauf eine Antwort?

Vielen Dank und frohes Neues...
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben