레일을위한 Wicked_PDF의 더 나은 페이지 나누기

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가 다음 페이지로 이동하여 한 페이지에 이미지와 헤드 라인을 남기고 나머지 페이지는 큰 페이지 간격으로 남겨 둡니다.

(페이지의 jQuery에 대한 외부 링크를 사용하여) 몇 가지 자바 스크립트를 도입하여 페이지 콘텐츠를 높이기를 기준으로 별도의 div로 나누려고했지만 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; }