：通过JavaScript插入html后 [英] :after when inserting html through JavaScript

问题描述

我创建了一个网站，通过ajax调用从数据库加载内容，然后通过创建元素并将其附加到其父级来写入数据。

I'm creating a website that loads content from a db through an ajax call and then writes the data by creating elements and appending them to their parent.

目前无法正常工作，如下图所示，但是当我手动添加使用开发工具的HTML，一切工作正常。

It is currently not working correctly as can be seen in the images below, but when I manually add the HTML using the developer tools, everything works fine.

这是如何应该出现，

这是目前的显示方式，

我做错了什么？

（ jsFiddle ）

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';
  var thumbIMG = document.createElement('img');
  thumbIMG.id = 'Review_' + this.iD + '_Picture_' + this.pictures[i].pictureID;
  thumbIMG.src = this.pictures[i].picture;
  thumbIMG.border = '0';
  thumbDIV.appendChild(thumbIMG);
  thumbsDIV.appendChild(thumbDIV);
}
picturesDIV.appendChild(thumbsDIV);
parentDIV.appendChild(picturesDIV);

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

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

推荐答案

如果您知道每行上有多少图像，那么可以设置列结构。如果您始终有5张图片，则您可以拥有父级的 100％宽度的1/5大小的列。

an alternative would be to set up a column structure if you know how many images are on each row. If you always have 5 images, you can have 1/5 size columns of your parent's 100% width.

在每一列中，有一个 div 作为列的内容，

And inside each column, have a div that serves as the content of the column, which should be about 85% of the column width so that you automatically have spaces between each image.

这种方式你不是从技术上计算每个图像的确切大小和它们之间的空间，得到计算为你。

this way you're not technically calculating the exact size of each image and the spaces between, they get calculated for you.

如果您使用 img 标记，请设定 width：100％ / code>和 height：auto ，以便它们将占用全宽，并且其高度将保持其比率

and if you're using img tags, set their width:100% and height:auto so that they will take full width, and their height will maintain its ratio

这里是我所说的例子 http://jsfiddle.net/7zm8mawh/1/

这篇关于：通过JavaScript插入html后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！