如何将一个巨大的div分成多个div？ [英] How to split a giant div into multiple divs?

问题描述

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

I got a task that I am not sure how best to do it. So I would like some input or suggestions :)

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

Alright, so here is what I need to do.

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

I have a page with content being sent to the print (it contains images, and text in divs, p, span, h1, h2, h3, hr, a etc tags). And let's say it is roughly 1500 pixels high.

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

I have a container div say 300 by 500 pixels.

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

I need to take the page with all of the content, and split up that content into the divs.

所以：

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

进入：

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

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

But my problem comes with how do I take a giant object of multiple elements on a page and go through it and determine that this div should be cut in half and placed in part 1 and part 2 because it can't fit in the remaining space in part 1? And how do I determine what is remaining and what isn't?

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

My thought was to read the entire contents of the body tag into a variable, looping through each element and adding it to another variable which would have remaining space, I could determine that based on the DOM elements height and width. But I'm not sure if that is the best idea.

推荐答案

如果使用暴力类型的方法并不是问题，然后使用类似下面的东西应该工作：

If using a brute force type approach is not out of the question, then using something like following should work:

• 将所有内容放入div 1


• 开始服用从div 1到div 2的事情，直到div 1的大小正确


• 重复div 2的过程

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

An alternative approach would be to loop through each node in the div, summing the total height until it exceeds the limit. At that point, take a step back and start moving the content to the next div, repeating the process.

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

If your page has a lot of text in a single text node, then it may be a bit tricky. You would most likely need to implement some kind of system to split text nodes in order to be able to calculate the height of individual text blocks and to be able to split them between divs.

这篇关于如何将一个巨大的div分成多个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！