：通过JavaScript插入html后

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

正如下图所示，它目前工作不正常，但当我使用开发人员工具手动添加HTML时，一切都正常

应该是这样的,

这就是它现在的样子

我做错了什么

（）

var thumbsDIV=document.createElement（'div'）；
thumbsDIV.className='Thumbs'；
对于（var i=0；i

.Thumb{
显示：内联块；
边缘底部：5px；
宽度：15%；
光标：手；
光标：指针；
缩放：1；
*显示：内联；
}
.拇指：之后{
内容：“；
宽度：100%；
显示：内联块；
缩放：1；
*显示：内联；
}
.拇指img{
宽度：100%；
}

---

您的“：after”代码不会影响图像的侧边距。通过删除它，它们保持不变，影响的是两组图像之间的高度

这里发生的是两个div之间众所周知的空间。当你写这篇文章时：

<div>HI</div>
<div>WORLD</div>

---

到CSS中的.Thumb类。或者，如果希望它们均匀分割，而不是简单的div，请使用带display:table的div。

如果知道每行上有多少图像，另一种方法是设置列结构。如果总是有5个图像，则可以有父级

100%宽度的1/5大小的列

在每个列中，有一个
div
，作为列的内容，它应该是列宽的85%，这样每个图像之间就会自动有空格

通过这种方式，你不需要从技术上计算每个图像的确切大小以及它们之间的间距，它们是为你计算的

如果您使用的是
img
标记，请设置它们的
宽度：100%
和
高度：auto
，这样它们将占据整个宽度，并且它们的高度将保持其比例

下面是我所说内容的一个示例
您希望
内容：
跟随
。Thumbs
而不是
。Thumb
？或者这是一个打字错误？…好吧，不管怎样，
内容：
在JS之后对我有效。布局的一个不同之处是，在每个
.Thumb
元素之后不再有空白文本节点。另外，您的
onclick
将无法给出所需的结果，但这是一个不同的问题。嘿，伙计们，我把它放在JSFIDLE中，您可以看到不同之处。问题确实是图像之间缺少空格，这似乎是由于元素一个接一个地插入（如果在每个“.Thumb”div之后都输入了enter，则空格会神奇地出现）您不想这样做。改用flexbox。在中找到了解决方案是的，间距应该存在，因为它将图像均匀地分布在父对象上。因为这样做会自动设置图像之间的边距，因此我不需要根据屏幕大小计算边距，以便可以使用display:table。检查我答案的结尾。如果给出指示，显示表会自动将内容放入其中。
<div>Hi</div><div>
WORLD</div>

margin-right: 5px