如何将一个巨大的div分成多个div？

Question

我有一项任务，我不确定如何做到最好。所以我想要一些意见或建议：）

好的，所以这就是我需要做的事情。

我有一个内容被发送到打印的页面（它包含图像，以及div，p，span，h1，h2，h3，hr，a等标签中的文本）。让我们说它大约是1500像素高。

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

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

所以：

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

进入：

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

但我的问题在于我如何在页面上拍摄多个元素的巨大物体并通过它并确定该div应该被切成两半并放在第1部分和第2部分中，因为它不适合第1部分的剩余空间？我如何确定剩余什么和什么不是？

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

Answer 1

如果使用蛮力型方法并非不可能，那么使用以下内容应该有效：

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

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

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