Question

我是编码的新手，我用JavaScript替换了一些重复的HTML，现在用于显示4的图像不再是水平显示的。它们现在只显示在左侧。我已经尝试用父div中的float左边的子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 Script：

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

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

1 个答案: