DOM Los divs equidistantes con bloques en línea y justificación de texto no funcionarán al insertar a través de JS

Question

He intentado implementar la solución de justificación de texto + bloque en línea de Chris Coyier para distribuir automáticamente divisiones horizontalmente en el ancho de un contenedor determinado. http://css-tricks.com/equidistant-objects-with-css/

Esto funciona muy bien cuando los elementos se cargan inmediatamente en el DOM pero por algún motivo falla al agregar elementos mediante programación a través de JS. Es como si el navegador simplemente ignorase las propiedades de css.

Echa un vistazo a este violín para ver un ejemplo muy básico: http://jsfiddle.net/xmajox/NUJnZ/ Las dos primeras filas se agregan a la carga de HTML. Haga clic en el botón para agregar más en tiempo de ejecución a través de JS.

Inicialmente pensé que podría estar relacionado de alguna manera con el uso de pseudo-elemento: después de eso probé una versión diferente con un nodo DOM en su lugar: http://jsfiddle.net/xmajox/wnPSA/ Desafortunadamente reacciona exactamente de la misma manera.

¿Alguien tiene alguna idea de por qué sucede esto? o mejor aún, ¿cómo arreglarlo/prevenirlo?

Answer 1

Es necesario que haya algún tipo de espacios en blanco entre los elementos para que esto funcione, ver esto: http://jsfiddle.net/NUJnZ/22/

Aviso en la tercera fila que no hay espacio entre los DIVs. Cuando jQuery agrega el nuevo elemento, no hay espacios en blanco iniciales o finales.

Simplemente agregue un espacio al final con .before(' ') y los elementos se alinean correctamente. (Si se utiliza .after(' ') hay un problema de espacio y en el último elemento)

violín Actualizado: http://jsfiddle.net/NUJnZ/24/