javascript - 以特定网格布局显示图像 : ejs

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>