HTML分頁雙列布局

Question

我有一個雙列頁面（<p>標籤後，第一個一半移到第2列的JavaScript）。

我的問題是，我想分解成「頁」，就像你會看到，如果你正在閱讀PDF。

有沒有一個乾淨的方式來做到這一點？或者我需要以編程方式check if each page is overflowing填充它們？這甚至會工作嗎？

Answer 1

一個可能的方式做到這一點是讓所有不同的div與它所有的副本，然後與scrollTop的轉到頁按/ collumn。

喜歡的東西：

<div id="page1" class="page"> 
    <div id="p1_column_1" class="column">Here all the copy</div> 
    <div id="p1_column_2" class="column">Here all the copy</div> 
</div> 
<div id="page2" class="page"> 
    <div id="p2_column_1" class="column">Here all the copy</div> 
    <div id="p2_column_2" class="column">Here all the copy</div> 
</div> 

然後CSS給它的高度，寬度和溢出的隱藏，然後使用javascript/jQuery的是這樣的：

var curr_col = 0; 
var col_height = $('.column').height(); 
$('.column').each(function() { 
     $(this).scrollTop(col_height*curr_col); 
     curr_col++; 
}) 

編輯 檢查這個小提琴看結果：http://jsfiddle.net/taPjR/3/。 在這個例子中，我使用jQuery從第一個div複製文本。

而且我知道這是一種非常骯髒的方式，但我不確定是否有其他字體/字體大小和複製中的圖像。

也許像LaTex這樣的pdf生成器（http://www.latex-project.org/）也可能很有趣？ 希望我能幫上忙。