javascript - HTML分页两列布局

Question

我有一个两列页面（<p>前半部分之后的标签使用 javascript 移动到第 2 列）。

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

有没有一种巧妙的方法来做到这一点？或者我是否需要在填充它们时检查每个页面是否以编程方式溢出？那还能用吗？

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

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

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