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>

Answer 2

<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>

Answer 3

我能得到的最接近的是：

#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的大小是约束因素，我们被迫限制子项的最大大小。但是如果孩子做适合父母，上面的CSS应该提供所需的结果。

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

3 个答案: