在其他2个Div之下划分，位置由其他人的位置和高度驱动

Question

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

从概念上讲，html页面分为多个列。我的工作示例将是四列宽度相等的列（因此每列占整个可用宽度的25％）。

然后将

Div以一个名义序列放置在页面上，每个Div水平放置以占据一列或多列，并在给定位于上方的列中的任何Div之前尽可能垂直地定位在页面上方。 （对于那些熟悉游戏Connect 4的人来说，这有点像Connect 4，但是这些部分从下往上滑动，每个部分可能占据超过1列。）

例如：

-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.top将是Div2.bottom和Div3.bottom的'较低'（即值较大））

我已经排除了使用桌子或将Div2和Div3包装在另一个Div中（因为在这两种情况下Div4都不应该由Div3驱动）。

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

提前感谢任何指导。

JB。

0 个答案:

没有答案