用JavaScript更换样式，将图像不再在线替换HTML

Question

我是编码的新手，我用JavaScript替换了一些重复的HTML，现在的图像不再是水平显示的。他们现在仅显示在左边。我尝试替换儿童div中剩下的浮点，而float则在父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);

Answer 1

您的原始HTML周围有一个<div class="img">包装器。但是，您的JavaScript代码仅创建一个外部包装器，并且它围绕 ash 图像。

您可以通过简单地将其在循环中而不是外部附加加附加方式来解决：

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