0

私はウェブサイトを構築していて、いくつかの問題を抱えています。

HTMLコードが次のような場合：

<div class="parent">    
    <div class="child">
         **contents1**
    </div>

     **contents2**
</div>

およびCSSスタイルシートは次のようになります。

.parent{ position: relative;}
.child{ position: absolute; top: 10px; left: 20px;}

その場合、「親」の境界には「子」の領域は含まれず、コンテンツの境界ボックスのみが含まれます2。

それを解決する方法はありますか？

親のバウンディングボックスには、位置属性に関係なく、子のバウンディングボックスが含まれている必要があります。

JQueryを使用して親のサイズを計算できる場合があります。

しかし、CSSだけでできる方法があると思います。

肯定的な答えを得ることを願っています。

ありがとう！

4

1 に答える 1

2

position:absolute;要素をドキュメント フローから外します。これがこのプロパティのポイントです。

ただし、高さが静的な場合.childは、次のように適切なパディングを親に適用することで回避できます。

.parent{position:relative;padding-top:60px;} /*(40+10*2)px*/
.child{position:absolute;top:10px;left:20px;height:40px;}

いじられた

それでもディメンションを考慮したい場合は、絶対配置が乱用されている.child可能性があり、おそらく別の方法で逃げることができます（より良いコンテキストなしで何かを提案するのは難しいです）

通常、匿名ブロックも使用しないことをお勧めします。

于 2012-06-24T02:16:15.410 に答える