:after 通过 JavaScript 插入 html答案

【问题标题】：:after when inserting html through JavaScript:after 通过 JavaScript 插入 html
【发布时间】：2015-07-14 12:31:08
【问题描述】：

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

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

应该是这样的，

这是它目前的样子，

我做错了什么？

(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>

【问题讨论】：

您希望content: 追随.Thumbs 而不是.Thumb？还是打错字了？
...无论如何，content: 在 JS 之后对我有用。布局的一个不同之处在于，每个 .Thumb 元素之后不再有空白文本节点。此外，您的 onclick 将无法提供所需的结果，但这是另一个问题。
嘿伙计们，我把它放在 jsfiddle 中，在那里你可以看到不同之处。问题确实是图像之间缺少空间，这似乎是由于元素一个接一个地插入（如果你在每个 '.Thumb' div 之后输入一个回车，空格就会神奇地出现）
您不想这样做。改用 flexbox。 css-tricks.com/snippets/css/a-guide-to-flexbox
在stackoverflow.com/questions/6048561/…找到解决方案

标签： javascript html css

【解决方案1】：

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

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

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

由于该段落，在两个 div 的中间创建了一个空格。在 JavaScript 中，该段落不是人工添加的。

如果您删除这些 div 之间的空格，例如：

<div>Hi</div><div>
WORLD</div>

这种情况不再发生。正如您在小提琴的此更新中看到的那样：https://jsfiddle.net/vqe4fth5/8/

两张图片完全相同。如果您想为图像添加一些样式，只需在“.Thumb”类中添加“margin-left”即可。

对于该空白也有几个解决方案。这是一个：Remove "whitespace" between div element

如果打算有间距，请添加

margin-right: 5px

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

【讨论】：

是的，间距应该在那里，因为它将图像均匀地分布在父级上。
因为这样做会自动设置图像之间的边距，因此我不需要根据屏幕尺寸计算边距应该是多少
为此，您可以使用 display:table。检查我的答案的结尾。如果也给出说明，显示表会自动适应里面的东西。

【解决方案2】：

如果您知道每行有多少图像，则另一种方法是设置列结构。如果你总是有 5 张图片，你可以有你父母 100% width 的 1/5 大小的列。

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

这样，从技术上讲，您无需计算每张图像的确切大小以及它们之间的空间，而是为您计算出来的。

如果您使用img 标签，请设置它们的width:100% 和height:auto，以便它们占据全宽，并且它们的高度将保持其比例

这是我正在谈论的内容的示例http://jsfiddle.net/7zm8mawh/1/

【讨论】：