✔ float-problem

[Netzwerkidi]

Flohe Osteln, in die Lunde!!

Hallo,

vielleicht kann mir einer bei Float-Problem helfen:
Die SPAN-Boxen im Bild innerhalb eines DIVs sollen eigentlich alle untereinander, von links nach rechts und ohne Zwischenraum erscheinen und nicht wie abgebildet mit diesen leeren Flächen.

Wer weiß Rat?

CSS:

padding:5px;
float:left;
margin:2px;
width:300px;
padding:5px; 
border:1px inset #ccc

LG
Idi

 

[SpiceLab]

Das Erscheinungsbild resultiert aus den unterschiedlichen/variablen Boxenhöhen.

Lösung, um die Lücken zwischen den Boxenrahmen (Grid-Modell) zu schließen: eine height-Regel deklarieren, oder jedes Element anstelle der float-Eigenschaft mit seinen individuell absoluten top- u. left-Koordinaten ausstatten.

Bei letzterem nicht vergessen, für das Elternelement <div> position:relative vorzusehen, damit sich die Positionierung der Nachfolgeelemente auf seine Boxengrenzen bezieht.

 

[Netzwerkidi]

"...eine height-Regel deklarieren..."
Du meinst, die Höhe (fix) vorzugeben? Das will eben nicht, weil dann die Texte abgehackt werden.

Die Boxen mit Inhalt werden zur Laufzeit durch ein Script erzeugt.

"... jedes Element anstelle der float-Eigenschaft mit seinen individuell absoluten top- u. left-Koordinaten ausstatten..."
Das wäre dann nach der Generierung ein weitere separater JS-Lauf in dem dann die einzelnen Boxen im übergeordnenten Div aufgebaut werden. Die Breite des Divs kann sich allerdings ändern, wenn das Browserwindow geändert vom Anwender.

Schon Wahnsinn, dass das System manchmal einfachste Probleme einfach nicht kann.

PS: Ich habe mir das jetzt auf dein Posting hin noch einmal angesehen, das ist wohl doch keine so triviale Angelegenheit.

 

[SpiceLab]

PS: Ich habe mir das jetzt auf dein Posting hin noch einmal angesehen, das ist wohl doch keine so triviale Angelegenheit.

Weil die Boxen bzw. deren Inhalte zur Laufzeit per Script generiert werden, und hier zwei Variablen im Spiel sind: die <div>-Breite, woraus die <span>-Anzahl pro Zeile hervorgeht, und die <span>-Höhen.

Dazu müßte zur Laufzeit mittels offsetWidth und der bekannten <span>-Breite die darzustellende Boxenanzahl pro Zeile im <div>, sowie mit offsetHeight die <span>-Höhen ermittelt werden, um schlußendlich die jeweilige Positionsangabe zu setzen.

 

[Netzwerkidi]

...und weil ja auch durchaus neben einem hohen span mehrere nicht so hohe span stehen können...
Geht fast in Richtung Packgut-Optimierung - nur ohne dritte Dimension.

 

[SpiceLab]

Über Google bin ich eben über den externen Forenbeitrag Fluid Grid Layout problem on Safari gestolpert, der in der Antwort einen ersten Lösungsansatz für's Scripting bereithält