在HTML中构建一个巨大的2D div网格

Question

例如，我想要构建一个巨大的divs (10000 * 10000)单元。我不需要立即显示整个网格，而是显示一个小窗口(10 * 10)，并使用箭头将新的单元格延迟加载到视图中，当用户在该网格中导航时。

把它想象成一个游戏地图，一旦我加载了一个单元格，我想保留它，但我只想把那些单元格加载到视图端口之外。

我第一次尝试使用浮动div，但很快就证明很难维持div的水平和垂直顺序，因为用户在两个方向上随机导航。

我开始想，也许使用固定的左，每个单元格的顶部属性会是一个更好的选择，把加载的单元格和空载的单元格放在正确的位置。

我知道你会说这是一个主观的问题，没有代码样本，但我相信这是一个很好的问题，所以我在这里重申：

使用“浮动:左”div或“位置:绝对”来绘制一个巨大的二维div网格更好吗？

编辑

我发现在以前加载的单元格和不相邻的单元格之间保留空白或空格比较容易，例如，我可能会遇到这样的情况：

...
<div id="cell-9"></div>
<div id="cell-10"></div>
<!-- preserved space or place holder for cells 11-15 -->
<div id="cell-16"></div>
<div id="cell-17"></div>
...

因此，解决方案可能应该考虑到这种情况。

Answer 1

这取决于你想做什么：

• 我建议你用 divs的父级上的display: flex; flex-wrap: wrap; // 或使用： display: inline-table; //在你的电视上
• 如果您希望逐步加载，我还建议您创建div，然后使用javascript，将屏幕上的最后一个div作为if(neer to the edges) { load this much divs }的目标。

编辑

我制作了这个链接到我的JSFiddle，展示了如何使用Javascript添加一个flex-box div，它可以精确地显示您放置它的位置。