html - 两个 div ruby​​ 后的分页符

标签 html css ruby-on-rails ruby

我正在生成一个带有明信片的 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; }
}
}

最佳答案

这可以使用 jQuery(或 vanilla JS)很容易地完成。

这种方法将逻辑排除在您的 View 之外,这被认为是比在您的 View 中插入逻辑更好的方法。

再培训局:

<% @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; 
  }
}

关于html - 两个 div ruby​​ 后的分页符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29479507/

相关文章:

html - 移动 chrome 上的 wow.js 动画仅在停止滚动时触发

layout - 如何控制不同字体大小的非 block 级元素之间的行高?

html - CSS:如何定义一个带有无限垂直边框且初始高度为 100% 的居中 div?

ruby-on-rails - Rails 连接表

javascript - 如何获得淡入淡出的模态效果?

jquery - 全宽响应式等间距水平菜单栏 bootstrap 3

html - 结合 flex 和绝对定位时的混淆

html - 我怎样才能使网格(设计)响应?

ruby-on-rails - 在 Rails 中,我应该使用生成器吗?

html - 如何将 HTML5 数据属性添加到 Rails 表单标签标签?