在HTML中，可以在没有Javascript的情况下相对于不同的元素定位一个元素

Question

我想知道是否可以只使用HTML和CSS(不使用任何Javascript)来实现以下功能：

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

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

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

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

第二版：换一种说法：有没有什么方法可以指定一种类似于这种"神奇"CSS:的样式

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

也许使用CCD_ 1？

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>

Answer 2

我能得到的最接近的近似值是：

#div1{
position: relative;
overflow: hidden;
}
#div3 {
position absolute;
top: 50%;
left: 0;
max-width: 50%;
max-height: 50%;
}
#div2 {
position: absolute;
top: 0;
right: 0;
max-width: 50%;
}

与OP的问题类似，这种方法的问题是父div的大小是约束因素，我们被迫限制子div的最大大小。但是如果的子级适合父级，则上述CSS应提供所需的结果。

Answer 3

<div id="div1" style="border:thin red solid; width:600px; margin-left:300px">
<div style="height:700px; width:300px; border:thin solid green;float:right; position:relative">
<div style="border:thin solid black; height:200px; width:290px; top:50%; position:absolute; margin-left:-300px"></div>
</div>
<div style="clear:both"></div>
</div>