2

我想知道是否可以仅使用 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 不能相互嵌套。

4

3 回答 3

1 
<div>
<div style="float:left; width: 50%; margin-top: 100px; height: 300px;"></div>
<div style="float:left; width: 50%; height: 300px;"></div>
</div>
于 2012-11-26T13:07:10.140 回答
0 
<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>
于 2012-11-26T13:10:20.133 回答
0

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

#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 应该会提供预期的结果。

于 2012-11-26T13:25:18.870 回答