Блог

Главная - Вопросы по программированию - Как можно показать 4 подукта подряд express.js

Как можно показать 4 подукта подряд express.js

#javascript #node.js #express #ejs

Вопрос:

Я пытаюсь отобразить 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>

Ответ №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>

Однако это оставит вас по существу с двумя строками на продукт. Я сделал это только на основе вашего текущего использования a <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>

Комментарии:

1. у вас есть какие-нибудь идеи, как я могу показать 4 продукта подряд ?

2. Для этого можно использовать Css-стили @MuhammadUsman. Пожалуйста, ознакомьтесь с обновленным ответом, в котором текст помещается в div, а затем используется стиль для перемещения текста влево

3. но как css может поместить 4 продукта в ряд ?

4. о, я понимаю, извини. Просто вставьте каждый продукт в новый <td> , а не в новый ряд. Однако я действительно не рекомендую использовать таблицы для достижения этой цели. В будущем проведите некоторые исследования в FlexBox*

Метки: