Question

  <div class="row">
      <% for(var i=0; i < sImages.length; i++) { %>
      <img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
        style="display: block;float: left;margin-right: 5px;">
      <% } %>
  </div>

这是我的ejs模板中的内容。我正在从此模板生成pdf，我希望将图像调整为33.33％的大小，并希望网格布局像第一行中的3张图像和第二行中的2张图像。最多不会有5张图片。我尝试了某些CSS技巧，但没有用

Answer 1

有许多解决方案可以实现这种布局，这里有两种简单的方法，如下所示：

<div class="row">
  <% for(var i=0; i < sImages.length; i++) { %>
  <img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
    style="display: block;float: left;margin-right: 5px;width: calc(33.3333% - 5px);">
  <% } %>
</div>

或

<div class="row">
  <% for(var i=0; i < sImages.length; i++) { %>
  <img src="http://12.18.11.52:8980/public/uploads/<%=sImages[i]%>" class="img-thumbnail" alt="Cinque Terre"
    style="display: block;float: left;margin-right: 2%;width: 31.3333%;">
  <% } %>
</div>

以特定的网格布局显示图像：ejs

1 个答案: