Express.js+EJS项目如何实现每行展示4个产品且详情位于图片下方

后端路由代码逻辑正常，无需修改，仅需调整EJS模板和对应CSS文件即可实现需求：

1. 替换原有EJS模板代码 #

<head>
   <title>All Medicine</title>
   <link href="/stylesheets/medicine.css" rel="stylesheet">
</head>
<body>
<div class="medicine-list">
  <% for (let i =0; i<medicine.length; i++){%>
    <div class="medicine-card">
      <img class="medicine-pic" src="./medicine/<%= medicine[i].medicinePic%>" alt="<%= medicine[i].name%>">
      <div class="medicine-info">
        <p><%= medicine[i].name%></p>
        <p>价格：<%= medicine[i].price%></p>
        <p>效价：<%= medicine[i].power%></p>
        <p>库存：<%= medicine[i].quantity%></p>
      </div>
    </div>
  <%}%>
</div>
</body>

注意：原代码中id="pic"重复使用不符合规范，已修改为class选择器

2. 在medicine.css中添加如下样式 #

.medicine-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px;
}
.medicine-card {
  width: calc(25% - 15px);
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 12px;
}
.medicine-pic {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 12px;
}
.medicine-info p {
  margin: 6px 0;
  font-size: 14px;
  color: #333;
}

如需适配移动端，可额外添加媒体查询：

@media (max-width: 768px) {
  .medicine-card {
    width: calc(50% - 10px);
  }
}
@media (max-width: 480px) {
  .medicine-card {
    width: 100%;
  }
}

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