javascript - HTML 分页两列布局

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 给它一个高度和宽度并 overflow hidden ，然后用 javascript/jquery 像这样:

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

编辑 检查此 fiddle 以查看结果:http://jsfiddle.net/taPjR/3/ . 在示例中，我使用 jQuery 从第一个 div 复制了文本。

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

也许像 LaTex ( http://www.latex-project.org/ ) 这样的 pdf 生成器也很有趣？ 希望我能帮上忙。