用JavaScript更改的样式替换HTML，图像不再水平排列

我不熟悉编码，我用JavaScript替换了一些重复的HTML，现在图像（过去显示4个字符）不再水平显示。它们现在仅显示在左侧。我已经尝试将子div中的float left替换为父div、display:inline块和display:inline中的float left。我怎样才能让它再次显示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>--->   

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

var galleryimage=[
['ore1'，'绿松石金块耳环']，
['ore9'，'黑朱砂耳环'，
['ore11''白色贝壳耳环']，
['ore12'，'白色贝壳和花朵魅力耳环']
];
功能打印（消息）{
var pictureDiv=document.getElementById（'picture'）；
pictureDiv.innerHTML=消息；
}
功能显示图像（列表）{
var listHTML=''；
对于（var i=0；i您的原始HTML在每个单独的图像周围都有一个
包装器。但是，您的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);

var listHTML=“”；
对于（var i=0；i
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);