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/）也可能很有趣？ 希望我能帮上忙。