Javascript 2个其他Div下方的Div，位置由其他两个Div的位置和高度决定

这个问题与我试图实现的一个设计模式有关，用于在页面上定位内容

从概念上讲，html页面分为若干列。我的工作示例是四列宽度相等的列，因此每列的跨度为总可用宽度的25%

然后按概念顺序将Div放置在页面上，每个Div水平放置以占据一个或多个列，并垂直放置，使页面尽可能向上，只要上面的列中有Div。对于那些熟悉游戏Connect 4的人来说，这有点像Connect 4，但是这些片段从下往上滑动，每个片段可能占据超过一列

例如：

-Div1 spans cols 1-4 (appears at top of page, width=100%)
-Div2 spans cols 1-3 (appears under Div1, left=0%, width=75%)
-Div3 occupies col 4 (appears under Div1,left=75%,width=25%)
-Div4 spans cols 1-2 (appears under Div2, left=0%, width=50%)
-Div5 spans cols 3-4 (appears under Div2 & Div3, left=50%, width=50%)

下面是一个粗略的设想：

_col1_    _col2_    _col3_    _col4_

111111111111111111111111111111111111

22222222222222222222222222    333333

4444444444444444    5555555555555555

实践中的问题是：

类似于上面的规范被转换为传统的HTML和CSS，以实现所需的最终结果。每个Div的水平位置和大小可按上述百分比定义。每个Div的垂直位置是相对于其正上方的Div定义的。每个Div的高度未知，因为它取决于Div的内容和总的可用页面宽度

除了一个问题外，一切都非常简单：如何定义位于两个或多个其他Div之下的Div的顶部位置？在上面的示例中，这将是Div5-其顶部位置由Div2和Div3 Div5驱动。顶部将是“较低”，即Div2.bottom和Div3.bottom的值较大

我已经排除了在另一个Div中使用表或包装Div2和Div3的可能性，因为在这两种情况下，Div4不应该由Div3驱动

这可以通过纯CSS实现，还是需要脚本？如果答案是脚本，那么任何关于它将如何工作的方向都将受到赞赏，当然，一个工作示例将是一个非常有用的帮助

提前感谢您的指导

---

JB.

您可能可以使用。