css - コンテナに子要素を配置する

Question

私はこれを試しています: コンテナ div 内にラップされた画像要素があります

<div id="container">
    <div id="a">
        <img src="b.jpg" alt="b" />
    </div>
</div>

ここで、画像の上部と左側が常にコンテナー div の高さと幅の 25% になるように子要素を配置したいと考えています。どうすればこれを達成できますか？

score 2 · Accepted Answer

それが唯一の要件である場合は、内側の div にパディングを追加するだけで実行できます。

W3C によると、これらのパーセンテージは外側の div のサイズを参照する必要があります。

マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。

高さについては、内側の div が外側の div 内の唯一の要素である場合にのみ機能します (内側の div が他の要素の高さを決定するため)。あなたの例では、それはうまくいきます。

score 1 · Accepted Answer

これを試して：

#container {position: relative;}
#container #a {position: absolute; left: 25%; top: 25%;}

これが実用的なフィドルです: jsFiddle

score 0 · Accepted Answer

試す：

#container { position:relative; }
#container img { position:absolute; top:25%; left:25%; }

ライブデモ：jsFiddle

3 に答える 3