如何解决EJS循环展示数据库结果时的重叠问题，实现纵向列布局？

从数据库获取包含results.ItemPicture、results.ItemLink等字段的数据，使用EJS的for循环在页面展示，希望元素纵向排成一列，但目前出现相互重叠的情况，如何实现需求？

原代码如下：

<div class =header>&nbsp;</div>
    <div class="app">
        <main class="content">
            <form action="/getItem" method="get" class="input-wrapper">
                <button type="submit" class="fa fa-search"></button>
                <input type="text" class="input-wrapper-text" style="color:white;" placeholder="Search" name="q">
            </form>


                <div style = "position: absolute; top: 175px; left: 47%;">
                    <h2>
                        Add Items
                    </h2>
                </div>
                <div style = "position: absolute; top: 250px; left: 10%;">
                    <h1>
                        Catalog
                    </h1>
                </div>
            <div style="width: 3000px; margin: 10px 0px;">
                <hr size="10">
            </div>

                <% for (var i=0; i<results.length; i++) {%>
                    <div style = "display: block;">
                        <div style = "display: inline-block; vertical-align: top;" class = "ebayImage">
                            <a href = "#" class = "ebayImage" onclick="javascript:location.href='<%= results[i].ItemLink%>';" id="itemButton">
                            <img src= "<%=  results[i].ItemPicture %>" style="width:250px; height: auto; border: 1px solid #cacaca;" alt="redirects to original eBay listing">
                            </a>
                        </div>
        
                    <div style = "display: inline-block; vertical-align: top;" class = "ebayInfo">
                        <a href = '<%=results[i].ItemLink%>' style = 'width: auto; margin-left: 20px; color:black;'><h3><u><%= results[i].ItemName%></u></h3></a>
                        <p>&nbsp;</p>
                        <p style="justify-content: space-between; width: auto; margin-bottom: 10px; margin-left: 20px; color: #5b619b; font-weight: bold;"> Points: <%= results[i].ItemPrice%></p>  
                        <p><button type="button" style="background-color: rgb(128, 0, 0);" id="newCatItem" onclick="deleteFromCat()">Remove Item</button></p>
                    </div>
                </div>  

（商品元素重叠的效果如图所示）

• 取消标题的绝对定位：Add Items和Catalog用了position: absolute，脱离文档流后会和后面的列表元素重叠。改成用margin、padding控制位置，让它们回到正常文档流，示例代码：

  <div style="margin: 175px auto 0; width: fit-content;">
      <h2>Add Items</h2>
  </div>
  <div style="margin: 50px 0 0 10%;">
      <h1>Catalog</h1>
  </div>
  

• 给每个商品项加垂直间距：循环生成的每个外层<div>，添加margin-bottom: 30px（数值可按需调整），让项与项之间上下分开，避免挤在一起：

  <div style="display: block; margin-bottom: 30px;">
  

• 修复HR容器的宽度溢出：原代码里width: 3000px的div会撑大页面，导致布局混乱，改成width: 100%或者直接去掉外层div，让HR自适应宽度：

  <div style="margin: 10px 0;">
      <hr size="10" style="width: 100%;">
  </div>
  

• 优化链接写法：原链接用onclick跳转可以简化成直接写href，避免冗余代码：

  <a href="<%= results[i].ItemLink%>" class="ebayImage" id="itemButton">
  

<div class="header">&nbsp;</div>
<div class="app">
    <main class="content">
        <form action="/getItem" method="get" class="input-wrapper">
            <button type="submit" class="fa fa-search"></button>
            <input type="text" class="input-wrapper-text" style="color:white;" placeholder="Search" name="q">
        </form>

        <!-- 改用相对布局，回到文档流 -->
        <div style="margin: 175px auto 0; width: fit-content;">
            <h2>Add Items</h2>
        </div>
        <div style="margin: 50px 0 0 10%;">
            <h1>Catalog</h1>
        </div>
        <!-- 修复HR容器宽度 -->
        <div style="margin: 10px 0;">
            <hr size="10" style="width: 100%;">
        </div>

        <% for (var i=0; i<results.length; i++) {%>
            <!-- 添加垂直间距，避免重叠 -->
            <div style="display: block; margin-bottom: 30px;">
                <div style="display: inline-block; vertical-align: top;" class="ebayImage">
                    <a href="<%= results[i].ItemLink%>" class="ebayImage" id="itemButton">
                        <img src="<%= results[i].ItemPicture %>" style="width:250px; height: auto; border: 1px solid #cacaca;" alt="跳转到原eBay商品页">
                    </a>
                </div>

                <div style="display: inline-block; vertical-align: top;" class="ebayInfo">
                    <a href="<%=results[i].ItemLink%>" style="width: auto; margin-left: 20px; color:black;"><h3><u><%= results[i].ItemName%></u></h3></a>
                    <p>&nbsp;</p>
                    <p style="justify-content: space-between; width: auto; margin-bottom: 10px; margin-left: 20px; color: #5b619b; font-weight: bold;">积分: <%= results[i].ItemPrice%></p>  
                    <p><button type="button" style="background-color: rgb(128, 0, 0);" id="newCatItem" onclick="deleteFromCat()">移除商品</button></p>
                </div>
            </div>  
        <% } %> <!-- 别忘了闭合for循环标签 -->
    </main>
</div>

内容的提问来源于stack exchange，提问作者drewski