javascript - Wicked_PDF for Rails 中更好的分页符

Question

我能够使用描述的技术 here在我想要的某些点获得分页符。但是，我有如下两列布局:

    <div class='book-main-image'><img src="<%= page[:image] %>" /></div>

    <div class='book-headline-holder'>
      <h1><%= page[:title] %></h1>
    </div>

    <div class='book-sidebar book-main-section'>
      <div class='book-sidebar-section'>
        <h4>Location</h4>
        <div class='sidebar-text'><%= page[:location] %></div>

        <h4>Client</h4>
        <div class='sidebar-text'><%= page[:client] %></div>
      </div>
    </div>

    <div class='book-main-content book-main-section'>
      <div class='book-body'><%= page[:body].html_safe %></div>
    </div>

样式如下:

  .book-main-section    { display: inline-block; vertical-align: top; }
  .book-sidebar         { width: 20%; margin-left: 3%; margin-top: 10px; }
  .book-main-content    { width: 70%; margin-left: 2%; }

大多数情况下这很好，但是如果 book-body div + book-main-image 和 book-headline-holder 的高度 比一页长，两个 book-main-section div 都移到下一页，在一页上留下一个图像和标题，有很大的差距，其余内容在下一页。

我试图开始引入一些 javascript(在页面中使用指向 jQuery 的外部链接)以根据页面内容的高度将页面内容分解为单独的 div，但我永远无法让 Javascript 执行(似乎完全忽略它)。有没有其他方法可以避免这种情况，或者让 javascript 工作？

Answer 1

我发现修复它的方法是删除包含 page[:body].html_safe 的整体 div .该数据包含段落标签，所以我改为设置它们的样式并删除了 <div class='book-body'>和 <div class='book-main-content book-main-section'> , 并将段落设置为如下样式:

p { float:right; width: 70%; margin-left: 2%; margin-right: 35px; }