Verhalten von Float

[HCA]

Hallo,

ich habe ein kleine CSS Problem. Ich habe verschiedene Div Elemente mit einer Breite von 100% und einer max-width von 400px. Die Elemente sollen maximal zu dritt in einer Reihe stehen und so floaten, wie auf dem ersten Bild zu sehen.

Leider schaffe ich es nur die Element so zu float, wie auf dem 2. Bild. Deutlich zu sehen, entsteht dort Leerraum.

Meine aktuelle Formatierung

.project{float: left; padding: 0 13px; width: 100%; max-width: 400px;} 

Vielleicht kann mir jemand helfen.

[Dormilich]

float hilft dir da gar nicht. das ist ein column-layout. dafür gibt’s dann http://www.w3.org/TR/css3-multicol/

[MrMurphy]

Hallo,

leider habe ich eine negative Auskunft: Deine gewünschte Anordnung funktioniert mit float nicht. Du musst zu anderen Lösungen greifen.

Zum Beispiel als Grundlayout 3 Spalten, in die die Container dann eingefügt werden. Eventuell funktioniert das auch mit Multicolumn.

Wenn die Boxen in einer Reihe die gleiche Höhe haben dürfen (wogegen meiner Ansicht nach nichts spricht) würde ich Flexbox bevorzugen.

Gruss

MrMurphy

[HCA]

Multicolumn habe ich gerade ausprobiert. Leider funktioniert das nicht so ganz da es vorkommen kann, dass die einzelnen Div-Elemente aufgesplittet werden und somit in 2 Spalten vorkommen.
Gibt es vielleicht noch andere Ideen?

[MrMurphy]

Hallo

wie sollen wir dir konkret helfen wenn du uns die dafür notwendigen Informationen vorenthälst? Das

Leider funktioniert das nicht so ganz da es vorkommen kann, dass die einzelnen Div-Elemente aufgesplittet werden und somit in 2 Spalten vorkommen.

zum Beispiel kannst du steuern. Wahrscheinlich machst du dir nicht die Mühe, dir erst mal das erforderliche Grundwissen anzueignen, bevor du dir bislang unbekannte Anweisungen nutzt. So wirst du dich immer nur von einem Problem zum nächsten hangeln.

Erwartest du etwa, das wir dir eine Lösung nach der anderen präsentieren und als Antwort immer nur "Funktioniert nicht." erhalten? Wobei du unsere Beiträge nicht mal richtig liest?

Gibt es vielleicht noch andere Ideen?

Ich habe dir zum Beispiel bereits zwei zusätzliche Ideen genannt. Für dein Problem gibt es keine direkte Lösung. Du musst also einen Umweg gehen, sei es über Multicolumn, ein Layout mit mehreren Spalten oder Flexbox. Es gibt noch andere Lösungen, die aber für die Praxis eher ungeeignet sind.

Gruss

MrMurphy

[Gast]

mal masonry versucht ?