javascript - 动态计算元素集之间的高度

Question

我正在尝试添加 CSS 以直观地连接元素集。我想动态计算具有 start 类的 div 和具有 end 类的 div 之间的高度。

这些 div 之间的内容可能会有所不同。例如，流程可能是:

<div class="start"></div>
<div class="multi"></div>
<div class="end"></div>

也可能是:

<div class="start"></div>
<div class="multi"></div>
<div class="multi"></div>
<div class="multi"></div>
<div class="end"></div>

所以高度需要变化。

我不确定如何使用 offset 或 position 来实现这一点，因为所有尝试都为所有实例生成了相同的高度。

我做了一个 fiddle 来说明我的挣扎:

https://jsfiddle.net/ux3vf0mg/

如您所见，圆 Angular 边框应从 start 开始并在 end 结束，但实际上它超过或未达到这些点。

如何动态计算每个实例的高度？

Answer 1

如果我没理解错的话，你希望 other-container 从 start div top 的顶部开始，在 end 的顶部结束 无论存在多少中间 div 内容，div block 。

首先，您正在编写的代码将相同的计算 totalheight 应用于两个 other-container div，因为有 2 个开始/结束 block ，jquery 代码只选择它找到的第一个元素开始/结束 block 。

供您运行和计算开始/结束 block 的代码。我建议您将 block 放在具有相同类的父容器中，然后为该类运行 .each 函数来计算它们的 其他 block 的单独高度。下面是我使用您的 jsfiddle 代码调整的示例代码，以提供所需的输出。

https://codepen.io/Nasir_T/pen/JyZZeE

我所做的是将每个开始/结束 block 包装在一个具有 block-container 类的 div 中，然后在 jquery 中在 block-container 类上运行一个 .each单独计算高度并将其应用于它的 other-container。

[编辑没有父/包装 block 的解决方案]

如果您不想在包装器中添加每个开始/结束 block ，那么您可以使用以下解决方案在同一父 block 中处理多个开始/结束 div

https://codepen.io/Nasir_T/pen/KvexPm

希望这对您有所帮助。快乐编码；