用 JavaScript 替换 HTML 改变了样式，图像不再水平内嵌答案

【问题标题】：Replacing HTML with JavaScript changed style, images no longer in-line horizontally用 JavaScript 替换 HTML 改变了样式，图像不再水平内嵌
【发布时间】：2016-12-27 21:09:51
【问题描述】：

我是编码新手，我用 JavaScript 替换了一些重复的 HTML，现在图像，过去显示 4 个，不再水平显示。它们现在仅显示在左侧。我尝试用父 div 中的左浮动替换子 div 中的左浮动，显示：内联块和显示：内联。如何让它再次显示 4？

<section class= "gal">
<script src="./gallery.js"></script
      <!---<div class="img" id="picture">
          <img class="img-zoom" src="./images/ore1.png" alt="" width="300"     height="200">
          <div class="desc">Turquoise Nugget Earrings</div>
  </div>

  <div class="img">
      <img class="img-zoom" src="./images/ore9.png" alt="" width="300" height="200">
      <div class="desc">Black Cinnabar Earrings</div>
  </div>
  <div class="img">
      <img class="img-zoom" src="./images/ore11.png" alt="" width="300" height="200">
      <div class="desc">White Shell Earrings</div>
  </div>
  <div class="img">
      <img class="img-zoom" src="./images/ore12.png" alt="" width="300" height="200">
      <div class="desc">White Shell and Flower Charm Earrings</div>
  </div>
  <div class="img">
      <img class="img-zoom" src="./images/ore13.png" alt="" width="300" height="200">
      <div class="desc">Light Green Resin Earrings</div>
  </div>--->

这是 CSS：

section.gal {

}
div.img {
    margin: 15px;
    width: 300px;
    float: left;

}

div.img:hover {

}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.img-zoom {
    width: 500px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

还有 Java 脚本：

    var galleryImages = [
['ore1', 'Turquoise Nugget Earrings'],
['ore9', 'Black Cinnabar Earrings'],
['ore11' 'White Shell Earrings'], 
['ore12', 'White Shell and Flower Charm Earrings']
];

function print(message) {
    var pictureDiv = document.getElementById ('picture');
    pictureDiv.innerHTML = message;
}

function displayImages(list) {
    var listHTML = '<div class="img">';
    for (var i = 0; i<list1.length; i +=1) {
        listHTML += '<img class="img-zoom" src="./images/' + list[i][0] + '.png" alt="" width="300" height="200">';
        listHTML += '<div class="desc">' + list[i][1] + '</div>';

    }
    listHTML += '</div>';
    print(listHTML);
}

displayImages (galleryImages);

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您的原始 HTML 对每个单独的图像都有一个 <div class="img"> 包装器。然而，您的 JavaScript 代码只创建了一个外部包装器，它围绕着所有图像。

您可以通过简单地将该标记附加到循环内部而不是外部来解决此问题：

var listHTML = "";
for (var i = 0; i<list1.length; i +=1) {
    listHTML += '<div class="img">';
    listHTML += '<img class="img-zoom" src="./images/' + list[i][0] + '.png" alt="" width="300" height="200">';
    listHTML += '<div class="desc">' + list[i][1] + '</div>';
    listHTML += "</div>";
}

print(listHTML);

【讨论】：