HTML Paginated两列布局

Question

我有一个双列页面（<p>标签在上半部分用javascript移动到第2列后。）

我的问题是，我想把它分解成“页面”，就像你看到你正在阅读PDF一样。

有一种巧妙的方法吗？或者我填写它们时是否需要check if each page is overflowing以编程方式进行？这甚至会起作用吗？

Answer 1

一种可能的方法是使用其中的所有副本制作所有不同的div，然后使用scrollTop转到相应的页面/列。

类似的东西：

<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/。 在示例中，我使用第一个div中的jQuery复制了文本。

而且我知道这是一种肮脏的方式，但我不确定是否还有另外一种保留不同的字体/字体大小以及副本中的图像。

也许像LaTex（http://www.latex-project.org/）这样的pdf生成器也可能很有趣？ 希望我能提供帮助。