2

我有一个任务，我不确定如何最好地完成它。所以我想要一些意见或建议:)

好的，这就是我需要做的。

我有一个内容被发送到打印的页面（它包含图像和 div、p、span、h1、h2、h3、hr、a 等标签中的文本）。假设它大约有 1500 像素高。

我有一个容器 div 说 300 x 500 像素。

我需要获取包含所有内容的页面，并将该内容拆分为 div。

所以：

_______________
|              |
|              |
|              |
|   Content    |
|              |
|              |
|              |
|______________|

进入：

_______________
|   Part 1     |
|______________|
|   Part 2     |
|______________|
|   Part 3     |
|______________|
|   Part 4     |
|______________|

但是我的问题是如何在页面上获取一个包含多个元素的巨型对象并通过它并确定该 div 应该被切成两半并放置在第 1 部分和第 2 部分中，因为它无法放入剩余空间在第 1 部分？我如何确定剩下的和没有的？

我的想法是将body标签的全部内容读入一个变量，循环遍历每个元素并将其添加到另一个有剩余空间的变量中，我可以根据DOM元素的高度和宽度来确定。但我不确定这是否是最好的主意。

4

1 回答 1

3

如果使用蛮力类型的方法不是不可能的，那么使用类似以下的方法应该可以：

  • 将所有内容放入 div 1
  • 开始将 div 1 中的东西放入 div 2 直到 div 1 的大小正确
  • 重复 div 2 的过程

另一种方法是遍历 div 中的每个节点，对总高度求和，直到超过限制。此时，退后一步，开始将内容移动到下一个 div，重复该过程。

如果您的页面在单个文本节点中有很多文本，那么可能会有点棘手。您很可能需要实现某种系统来拆分文本节点，以便能够计算单个文本块的高度并能够在 div 之间拆分它们。

于 2012-11-08T22:29:31.693 回答