Javascript：如何分隔 div答案

【问题标题】：Javascript: How to separate the divJavascript：如何分隔 div
【发布时间】：2021-10-18 09:33:15
【问题描述】：

我是 JavaScript 新手。在这里，我试图从数组中获取项目并将其显示在浏览器上。但我希望将div 分开。但是在这里当我运行程序时。第一个对象有一个 div 框，但第二个 div 在第一个 div 框内。但我希望将它们分开，以便我可以使用一些样式。

HTML Code

Javascript 代码：

let menu = [
    {
        id: 1,
        title: 'asos',
        category: 'greece',
        country: 'greece',
        img: './img/Asos.jpg',
        desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
        },
        {
        id: 2,
        title: 'hamburg',
        category: 'germany',
        country: 'germany',
        img: './img/Hamburg.jpg',
        desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
        },
        {
            id: 3,
            title: 'heidelberg',
            category: 'germany',
            country: 'germany',
            img: './img/Heidelberg.jpg',
            desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
        },
        {
            id: 4,
            title: 'manarola',
            category: 'italy',
            country: 'italy',
            img: './img/Manarola.jpg',
            desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda eius animi officiis dolorum eum!'
        }
]

let sectionCenter = document.querySelector('.section-center')

window.addEventListener('DOMContentLoaded', () =>{
    let itemMenu = menu.map(function(item) {
        return `             
        <div class="box">
        <img src="${item.img}" class="img" alt="${item.title}">
        <div class="desc">
            <div class="name">
                <h3>${item.title}</h3>
                <h3>${item.country}</h3>
            </div>
            <div class="border-bottom"></div>
            <p>${item.desc}</p>
        </div>`
    })
    let displayMenu = itemMenu.join("")
    sectionCenter.innerHTML = displayMenu
})

注意：如果我使用文章 class='box' 而不是 div class='box'，它会完美运行。但是使用div有什么问题呢？？

【问题讨论】：

欢迎来到 Stack Overflow！请使用tour，环顾四周，并通读help center，尤其是How do I ask a good question? 请作为文本发布代码、错误消息、标记和其他文本信息，而不是作为图片的文字。为什么：meta.stackoverflow.com/q/285551/157247
另外，当您提出问题时，文本区域右侧有一个橙色的大如何格式化框，其中包含有用的信息，并且工具栏已满格式化辅助工具。它们可以帮助您正确格式化代码。不需要所有那些<br>s 等（我正在为你修复它，但 @Rounin 打败了我。:-)）
我仍然无法理解您的代码。您需要将相关的代码块粘贴到格式化工具的单独部分中，即将 HTML 粘贴到 HTML 框中，将 CSS 粘贴到 CSS 中等等。

标签： javascript html css arrays

【解决方案1】：

您缺少结束 </div> 标记：

let itemMenu = menu.map(function(item) {
  return `             
    <div class="box">
      <img src="${item.img}" class="img" alt="${item.title}">
      <div class="desc">
          <div class="name">
              <h3>${item.title}</h3>
              <h3>${item.country}</h3>
          </div>
          <div class="border-bottom"></div>
          <p>${item.desc}</p>
      </div>
    </div>`  // <<< Missing tag
})

【讨论】：