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

Wicked_PDF for Rails中更好的分页符

1 个答案: