css 在EJS中将列中的元素放置在彼此的下面

wecizke3 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(131)

我正在提取已经保存在数据库中的项目“results.ItemPicture，results.ItemLink，etc.”，并使用一个for循环和EJS将它们显示在页面上，并希望将它们打印在页面的一列中。到目前为止，它们只是被放置在彼此的顶部。我将如何着手进行这项工作？

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

enter image description here

css

来源：https://stackoverflow.com/questions/74469526/placing-elements-in-a-column-underneath-each-other-in-ejs

1条答案

按热度按时间

cngwdvgl1#

只需删除所有匹配的样式：位置：绝对;
该属性使项目相互重叠，在这种情况下，您可能不需要绝对定位它们。
如果有一个特定的设计，你想遵循提供一个描述，我可以创建一个很好的HTML示例。
编辑：
只需将图像和内容 Package 在div中并使用“display：块”。并删除了“浮动”属性。这将设置产品在不同的行。
把所有的都包起来。
如何使用显示器：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>

赞(0）回复(0）举报 2022-11-19

我来回答

css 在EJS中将列中的元素放置在彼此的下面

1条答案

相关问题

热门标签

最新问答