在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>  

在此處輸入影像描述

uj5u.com熱心網友回復：

只需洗掉所有匹配的樣式： position: absolute;

該屬性使專案相互重疊，您可能不需要在這種情況下對它們進行絕對定位。

如果有您想要遵循的特定設計，請提供描述，我可以創建一個不錯的 HTML 示例。

編輯：

只是將影像和內容包裝在一個 div 中，并使用“display: block”設定樣式。并洗掉了“浮動”屬性。這會將產品設定在不同的行中。

將所有內容包裝在 foreach 中。

如何使用顯示：https ://www.w3schools.com/cssref/pr_class_display.php

<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="text-align: center;">
      <h2> Add Items </h2>
    </div>
    <div style="text-align: center;">
      <h1> Catalog </h1>
    </div>
    <div style="display: block; width: 100%; max-width: 100%; padding: 10px; box-sizing: border-box;">
      <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="https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 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>Item Name</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: 0.00 </p>
          <p>
            <button type="button" style="background-color: rgb(128, 0, 0);" id="newCatItem" onclick="deleteFromCat()">Remove Item</button>
          </p>
        </div>
      </div>

標籤：网页格式CSS节点.jsejs

上一篇：如何將此影像居中放置在容器中？

下一篇：如何在不影響文本的情況下更改背景影像的不透明度？[復制]