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

Question

我是编码新手，我用 JavaScript 替换了一些重复的 HTML，现在以前显示 4 个横向的图像不再水平显示。它们现在仅显示在左侧。我试过用父 div 中的 float left 替换子 div 中的 float left，display: inline block 和 display: inline。我怎样才能让它再次显示 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);

Answer 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);