8

Zurb Foundation のコードを調べたところ、レスポンシブな正方形の div を許可するために、次のような CSS アプローチを使用していることに気付きました。

.div{
    position:relative;
    width:33%;
    height:0;
    padding-bottom:33%;
}
.divInner{
    position:absolute;
    width:100%;
    height:100%;
}

私はいくつかの新しいプロジェクト（まだプライベート開発中）でこのアプローチを使用してきましたが、ブラウザのサポートや、高さが幅のサイズを模倣できる理由がわかりません。なぜこれが起こるのか誰か知っていますか？ありがとう！

4

1 に答える 1

9

2 番目の要素は、コンテナに対して絶対的に配置されます。これは相対的に配置されます。

CSS では、パーセンテージ ベースのパディングは、要素の幅に相対的です。それが四角い効果を生み出します。

また、すべての辺に同じサイズのパディングを追加すると、すべての辺のパディングのパーセンテージが同じになる理由もあります。幅と高さの両方ではなく、1 つの測定値 (幅) に相対的です。要素が正方形でない場合、パディングが歪む原因になります。

于 2013-04-09T19:06:29.437 に答える