DOM Vi phân cách nhau với các khối nội tuyến và văn bản biện minh sẽ không hoạt động khi chèn qua JS

Question

Tôi đã cố gắng triển khai giải pháp văn bản + khối nội tuyến của Chris Coyier để tự động phân phối theo chiều ngang của div theo chiều rộng của trình bao bọc nhất định. http://css-tricks.com/equidistant-objects-with-css/

Điều này làm việc tuyệt vời khi các phần tử được tải một cách thẳng thắn vào DOM nhưng vì một số lý do không thành công khi thêm các phần tử theo chương trình thông qua JS. Nó giống như trình duyệt chỉ bỏ qua các thuộc tính css.

Kiểm tra câu đố này cho một ví dụ rất cơ bản: http://jsfiddle.net/xmajox/NUJnZ/ Hai hàng đầu tiên được thêm vào tải HTML. Nhấp vào nút để thêm nhiều hơn trong thời gian chạy thông qua JS. Ban đầu tôi nghĩ nó có thể liên quan đến việc sử dụng phần tử giả: sau đó tôi đã thử một phiên bản khác với nút DOM thay vì: http://jsfiddle.net/xmajox/wnPSA/ Thật không may, nó phản ứng chính xác theo cách tương tự.

Bất kỳ ai cũng có ý tưởng tại sao điều này xảy ra? hoặc tốt hơn, cách sửa chữa/ngăn chặn nó?

Answer 1

Cần có một số hình thức khoảng trắng giữa các yếu tố này để làm việc, thấy điều này: http://jsfiddle.net/NUJnZ/22/

Chú ý ở hàng thứ ba mà không có khoảng trống giữa DIV. Khi jQuery chắp thêm phần tử mới, không có khoảng trắng đầu hoặc cuối.

Chỉ cần thêm dấu cách có .before(' ') và các phần tử xếp hàng chính xác. (Nếu bạn sử dụng .after(' ') có một vấn đề khoảng cách trên yếu tố cuối cùng)

Cập nhật fiddle: http://jsfiddle.net/NUJnZ/24/