Question

我正在生成带有明信片的PDF，每页应该有两张明信片。目前，我使用索引循环访问我的对象，然后告诉它分页if idx % 2 == 0。虽然这个解决方案对我来说根本不起作用。我的逻辑是否稳固，或者我的CSS不正确？

到目前为止，这是我的代码：

index.html.erb

<% @postcards.each_with_index do |name, idx| %>
    <% if idx % 2 == 0 %>
        <div class = "page-break"></div>
    <% end %>
    <div class = "postcards-container">
        <%= image_tag "badge_logo.png", :id => 'agency-badge' %>
    </div>
<% end %>

CSS：

.postcards-container {

    width: 600px;
    height: 390px;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    //padding: 1em;
    margin-bottom: 50px;

#agency-badge {
            width: 140px;
            height: 75px;
        }

@media print {
    .page-break { display: block; page-break-before: always; }
}
}

Answer 1

这可以通过jQuery（或vanilla JS）轻松完成。

这种方法可以保留视图中的逻辑，这被认为是比在视图中插入逻辑更好的方法。

ERB：

<% @postcards.each do %>
  <div class="postcard">
    <%= whatever content you want to display for each post card %>
  </div>  
<% end %>

JS：

$('.postcard:even').addClass('page-break');

CSS：

@media print {
  .page-break {
    display: block; 
    page-break-before: always; 
  }
}

两个div红宝石之后的分页符

1 个答案: