html - 在 HTML 中是否可以在没有 Javascript 的情况下相对于不同的元素定位元素

Question

我想知道是否可以仅使用 HTML 和 CSS(不使用任何 Javascript)来实现以下目的:

|--div1-----------------|
|         |--div2------||
|         |            ||
||--div3-||            ||
||       ||____________||
||       |              |
||       |              |
||_______|              |
|_______________________|

• div1 包含 div2 和 div3。
• div2 一直在 diff3 的顶部和右侧
• div3 一直在左边，它的顶部从 div2 的高度一半(或其他一些可配置的百分比)开始。
• div2 和 div3 的大小未知。我不是在要求使用绝对位置对此进行硬编码的明显解决方案。我正在寻找的解决方案必须适用于任意大小的 div。

更一般地说:有没有一种方法可以在不使用 Javascript 的情况下通过引用另一个元素的位置和大小来指定元素的位置？

编辑:上面示例的目标是 div1 在根据需要定位后自动扩展以适应 div2 和 div3，因此 div1 的大小也事先不知道。

EDIT2:以不同的方式提出问题:是否有某种方法可以指定类似于此“魔术”CSS 的样式:

#div2 { ... }
#div3 {
   position absolute;
   top: div2.height/2;
}

也许使用calc()？

EDIT3:div2 和 div3 不能相互嵌套。

Answer 1

<div>
<div style="float:left; width: 50%; margin-top: 100px; height: 300px;"></div>
<div style="float:left; width: 50%; height: 300px;"></div>
</div>