0

I was able to use the technique described here to get page breaks at certain points I wanted. However, I have a two column layout as follows:

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

Which is styled like this:

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

This is fine most of the time, but if the book-body div + the height of book-main-image and book-headline-holder are longer than one page, both book-main-section divs are shifted to the next page, leaving an image and headline on one page with a huge gap and the rest of the content on the next page.

I tried to start introducing some javascript (using an external link to jQuery in the page) to break up the page content into separate divs based on the height of them, but I could never get the Javascript to execute (seems to totally ignore it). Is there any other way to avoid this, or to get the javascript working?

4

1 に答える 1

0

それを修正する方法は、を保持しているモノリシックdivを削除することであることがわかりましたpage[:body].html_safe。そのデータには段落タグが含まれていたので、代わりにそれらのスタイルを設定して削除<div class='book-body'>し<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 に答える