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实现此目的，因为所有尝试都为所有实例生成了相同的高度。

我做了一个小提琴来说明我的斗争：

如您所见，圆形边框应从start开始，以end结束，但实际上它会超过或低于这些点。

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

Answer 1

如果我理解正确，您希望other-container从start div顶部开始，并在end div块的顶部结束，无论中间多少div内容存在。

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

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

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

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

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

希望这会有所帮助。快乐的编码;