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

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 に答える