nicht angemeldet
Blöcke, floating, variable Höhe und Co
Hi Leute,
um meine Vorstellung besser zu verdeutlichen hab ich erstmal eine Beispieldatei erstellt: http://test.schnappshot.de/float.html
Die <div>s floaten alle schön nebeneinander und wenn man das Browserfenster in der Größe ändert brechen sie auch anständig um. Was mir nicht gefällt erkennt man, wenn man die Fenstergröße so einstellt, dass jeweils drei Blöcke nebeneinander Platz finden:
Wenn ein <div> umbrechen muss (in eine neue Zeile muss) soll es sich (wie das allererste Element) ganz links am Fensterrand platzieren (statt neben einem anderen Element).
Ich brauche praktisch ein "clear: left", das dann in Kraft tritt, sobald ein Element umbricht (ansonsten nicht). Ein Beispiel wie die es mit drei Elementen nebeneinander aussehen sollte gibts hier: http://test.schnappshot.de/float2.html.
Vielleicht hat ja jemand eine Idee?
Grüße,
lucien
-
Hi Lucien,
Die <div>s floaten alle schön nebeneinander und wenn man das Browserfenster in der Größe ändert brechen sie auch anständig um. Was mir nicht gefällt erkennt man, wenn man die Fenstergröße so einstellt, dass jeweils drei Blöcke nebeneinander Platz finden:
Wenn ein <div> umbrechen muss (in eine neue Zeile muss) soll es sich (wie das allererste Element) ganz links am Fensterrand platzieren (statt neben einem anderen Element).Das ist afaik nicht möglich, denn die CSS2 Spec sagt ja:"Eine Floating-Box wird zu einer Block-Box, die nach links oder rechts verschoben wird, bis ihre äußere Kante die Kante des umschließenden Blocks oder die äußere Kante eines anderen Floats berührt. Die obere Kante der Floating-Box wird an der oberen Kante der aktuellen Zeilen-Box (oder der unteren Kante des vorhergehenden Blocks, falls es keine Zeilen-Box gibt) ausgerichtet. Falls nicht genügend horizontaler Platz in der aktuellen Zeile für den Float vorhanden ist, wird er Zeile für Zeile nach unten verschoben, bis eine Zeile genügend Platz dafür bietet."
Das von dir gewünschte Verhalten/ Layout ähnelt ja sehr stark einer Tabelle.
IMHO kann das nur dann funktionieren, wenn du sicherstellst, dass alle Floatboxen dieselbe Höhe haben.
Daher fiele mir nur das folgende Beispiel ein:Vielleicht hat ja jemand eine Idee?
Ja, Roger Johansson hat bspw. eine!
http://www.456bereastreet.com/lab/equal_height/Aber du wirst es schon ahnen ... - das funktioniert natürlich nicht mit dem IE.
Gruß Gunther
-
Hi Gunther,
Ja, Roger Johansson hat bspw. eine!
http://www.456bereastreet.com/lab/equal_height/Wahnsinn, erst dachte ich, dass ich keine Antwort bekommen werde, aber das Warten hat sich gelohnt! Danke dir...
Aber du wirst es schon ahnen ... - das funktioniert natürlich nicht mit dem IE.
Das ist mir egal ;-)
Grüße,
lucien
-