: после создания элементов html через javascript

Question

Я создаю сайт, который загружает контент из db через вызов ajax, а затем записывает данные, создавая элементы и добавляя их к своему родителю.

Однако мой CSS содержит некоторый стиль для элемента ::after, который не написан, когда я добавляю html через JavaScript, поскольку добавление элементов в html через JavaScript помещает каждый элемент непосредственно за предыдущий, пока вы покидаете пробелы когда вы пишете простой HTML

соответствующие CSS:

.Review .Thumb { 
    display: inline-block; 
    margin-bottom: 5px; 
    width: 15%; 
    cursor: hand; 
    cursor: pointer; 
    zoom: 1; 
    *display: inline; 
} 
.Review .Thumbs:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 

    zoom: 1; 
    *display: inline; 
} 
.Review .Thumb img { 
    width: 100%; 
} 

отношение само написано HTML:

<div class="Thumbs"> 
    <div class="Thumb" onClick="ViewThumb(1,1)"> 
     <img src="images/pictures/pic2.png" id="Review_1_Picture_1" border="0" title="Voorgerecht"> 
    </div> 
    <div class="Thumb" onClick="ViewThumb(1,2)"> 
     <img src="images/pictures/pic1.png" id="Review_1_Picture_2" border="0" title="Hoofdgerecht"> 
    </div> 
    <div class="Thumb" onClick="ViewThumb(1,3)"> 
     <img src="images/pictures/pic3.png" id="Review_1_Picture_3" border="0" title="Dessert"> 
    </div> 
    <div class="Thumb" onClick="ViewThumb(1,4)"> 
     <img src="images/pictures/pic4.png" id="Review_1_Picture_4" border="0" title="Tafeldekking"> 
    </div> 
    <div class="Thumb" onClick="ViewThumb(1,5)"> 
     <img src="images/pictures/pic5.png" id="Review_1_Picture_5" border="0" title="Sfeerbeeld"> 
    </div> 
</div> 

JavaScript:

var thumbsDIV = document.createElement('div'); 
thumbsDIV.className = 'Thumbs'; 
for(var i=0; i < this.pictures.length; i++) { 
    var pictureID = this.pictures[i].pictureID; 
    var thumbDIV = document.createElement('div'); 
    thumbDIV.className = 'Thumb'; 
    thumbDIV.onclick = function(){ViewThumb(iD, pictureID);}; 
    var thumbIMG = document.createElement('img'); 
    thumbIMG.id = 'Review_' + this.iD + '_Picture_' + this.pictures[i].pictureID; 
    thumbIMG.src = this.pictures[i].picture; 
    thumbIMG.title = this.pictures[i].description; 
    thumbIMG.border = '0'; 
    thumbDIV.appendChild(thumbIMG); 
    thumbsDIV.appendChild(thumbDIV); 
} 
picturesDIV.appendChild(thumbsDIV); 
parentDIV.appendChild(picturesDIV); 

В результате, как вы можете увидеть следующий собственный HTML:

JavaScript:

Когда я кладу все "Thumb" дивы на новой строке редактируя его с помощью инструментов разработчика, все работает нормально

Answer 1

Ваш CSS выглядит так, как будто он не отформатирован правильно. Для того, чтобы стиль работы с несколькими классами, необходимо разделить их запятыми

http://jsfiddle.net/bgerhards/qdrudpba/

.Review, .Thumb { 
    display: inline-block; 
    margin-bottom: 5px; 
    width: 15%; 
    cursor: hand; 
    cursor: pointer; 
    zoom: 1; 
    *display: inline; 
} 
.Review, .Thumbs:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 

    zoom: 1; 
    *display: inline; 
} 
.Review, .Thumb img { 
    width: 100%; 
}