0

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

    <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-bodydiv + 的高度book-main-image和book-headline-holder长于一页，则两个book-main-sectiondiv 都会转移到下一页，在一个页面上留下一个图像和标题，并且有很大的差距，其余的内容在下一页。

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

4

1 回答 1

0

我发现修复它的方法是移除持有page[:body].html_safe. 该数据包含段落标签，因此我改为设置它们的样式并删除<div class='book-body'>and <div class='book-main-content book-main-section'>，并将段落设置为如下所示：

p { float:right; width: 70%; margin-left: 2%; margin-right: 35px; }
于 2012-12-13T16:56:29.587 回答