DOM Equidistant divs mit Inline-Blöcken und Text-Rechtschreibprüfung funktioniert nicht beim Einfügen durch JS

Question

Ich habe versucht, Chris Coyier Inline-Block + Text-Rechtschreib Lösung zu implementieren, um div horizontal in einer bestimmten Wrapper-Breite zu verteilen. http://css-tricks.com/equidistant-objects-with-css/

Dies funktioniert hervorragend, wenn die Elemente sofort in das DOM geladen werden, aber aus irgendeinem Grund fehlschlägt, wenn Elemente über JS programmatisch hinzugefügt werden. Es ist so, als würde der Browser die CSS-Eigenschaften einfach ignorieren.

Werfen Sie einen Blick auf diese Geige für ein sehr einfaches Beispiel: http://jsfiddle.net/xmajox/NUJnZ/ Die ersten zwei Zeilen werden bei HTML-Last hinzugefügt. Klicken Sie auf die Schaltfläche, um in der Laufzeit mehr über JS hinzuzufügen.

Zunächst dachte ich, es könnte irgendwie mit der Verwendung von Pseudo-Element in Verbindung stehen: nachdem ich also eine andere Version mit einem DOM-Knoten ausprobiert habe: http://jsfiddle.net/xmajox/wnPSA/ Leider reagiert es genau so.

Hat jemand eine Idee, warum das passiert? oder besser noch, wie man es reparieren/verhindern kann?

Answer 1

Es muss für diese Arbeit eine gewisse Form von Leerzeichen zwischen den Elementen sein, sehen: http://jsfiddle.net/NUJnZ/22/

Hinweis in der dritten Reihe, dass es keinen Raum zwischen den DIVs. Wenn jQuery das neue Element anfügt, gibt es keine führenden oder nachgestellten Leerzeichen.

Fügen Sie einfach ein nachkommendes Leerzeichen mit .before(' ') hinzu und die Elemente richten sich richtig aus. (Wenn Sie .after(' ') verwenden es ein Abstand Ausgabe auf dem letzten Element)

Aktualisiert Geige: http://jsfiddle.net/NUJnZ/24/