如何在行 express.js 中显示 4 个产品答案

【问题标题】：How can show 4 poduct in row express.js如何在行 express.js 中显示 4 个产品
【发布时间】：2021-08-14 07:10:20
【问题描述】：

我正在尝试连续显示 4 个产品，但我不知道。我该怎么办？，因为它连续显示一个产品。我想在图片下方显示药物详细信息，但它在图片右侧显示详细信息

Route.js

router.get('/allMedicine', (req, res)=>{
   Medicine.find()
     .then(medicines=>{
        res.render('allMedicine',{
            medicine: medicines
        })
    })
    .catch(err=>{
        console.log(err)
    })
})

Ejs

<head>
   <title>All Medicine</title>
   <link href="/stylesheets/medicine.css" rel="stylesheet">
</head>
<body>
<table>
  <tbody>
    <tr>
    <% for (let i =0; i<medicine.length; i++){%>
      <td>
        <img id="pic" src="./medicine/<%= medicine[i].medicinePic%>" alt="pic"><br>
      </td>
      <td> <%= medicine[i].name%></td>
      <td><%= medicine[i].price%></td>
      <td> <%= medicine[i].power%></td>
      <td><%= medicine[i].quantity%></td>
    </tr>
    <%}%>
</tbody>
</table>

【问题讨论】：

标签： javascript node.js express ejs

【解决方案1】：

我从来没有使用过 Electron，但是我想我可以用纯 HTML 来回答，这会让人明白这一点。

你的方法

在这里，您可以在表格的一行中找到所有信息。因此，它们都按顺序并排出现。

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

<table>
  <!-- First Row -->
  <tr>
    <td> Image should go Here</td>
    <td>
      This item is below the image
    </td>
    <td>
      This item is below the image 2
    </td>
  </tr>

</table>

建议

在这里，我已将有关产品的信息放在新行中。这将允许信息显示在下方。

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

<table>
<!-- First Row -->
  <tr>
    <td> Image should go Here</td>
  </tr>
  
  <!-- Second Row -->
  <tr>
    <td>
      This item is below the image
    </td>
    <td>
      This item is below the image 2
    </td>
  </tr>

</table>

但是，这将使每个产品基本上只有两行。我只是根据您当前对每一位产品信息使用<td> 进行此操作。相反，我认为您应该将每个产品的所有信息（包括图片）放在一个 <td> 中，然后使用一些 css 将文本格式化为您想要的格式。

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
  
  .info p {
    float: left;
  }
</style>

<table>
  <tr>
    <td>
      <img src="your image" alt="Image Here" />
      <div class="info">
        <p>Name </p>
        <p>Quantity</p>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <img src="your image" alt="image here" />
      <div class="info">
        <p>Name </p>
        <p>Quantity</p>
      </div>
    </td>
  </tr>

</table>

【讨论】：

您知道如何连续显示 4 个产品吗？
@MuhammadUsman Css 样式可以用来做到这一点。请参阅更新后的答案，它将文本放入 div 中，然后使用样式将文本浮动到左侧
但是 css 如何将 4 个产品排成一行？
哦，我明白了，对不起。只需将每个产品粘贴到新的 <td> 中，而不是新行。但是我真的不建议使用表格来实现这一点。对于未来，对 FlexBox* 做一些研究