0

padding-bottom は要素の幅に相対的である必要がありますが、Chrome と Firefox の最新バージョンでテストしたところ、padding-bottom は親の幅に相対的です。

要素の幅に相対的な要素が必要ですが、機能しません:

width: 200px;
padding-bottom: 50%; /* must be 100px  */
height: 0;

例を参照してください: http://dabblet.com/gist/6898263

私に何ができる？

4

3 に答える 3

6

いいえ、paddingプロパティでは、パーセンテージは包含ブロックの幅に相対的です。これはおそらくbody要素またはdiv幅が設定されていない要素であるため、使用可能な幅を占有します。

要素をコンテナーにラップし、divコンテナーに目的の幅を設定すると、意図したとおりにパーセンテージを使用できます。

于 2013-10-09T10:00:13.470 に答える
1

widthとpaddingプロパティの間には関係がありません。ただし、両者が依存している 3 つ目のことがあります。それはemユニットです（ドキュメント）。Em単位は、測定可能なすべてのプロパティ (幅、ボーダー幅など) を定義するために使用でき、フォントサイズ (その場合は で定義する必要があります) に依存しpxます。

この簡単なハックを試すことができます：

font-size: 200px;
width: 1em;
padding-bottom: 0.5em;

私のフィドルを参照してください: http://jsfiddle.net/Wgzrn/。

あなたの例では、必要に応じて定義された別のdiv内部を使用したため、親の font-size はここでは問題になりません。font-size24px200px

私の解決策はあまりエレガントではありませんが、他には知りません。

于 2013-10-09T09:00:36.133 に答える
0

ラップされた div にパディングと背景色を追加するのはなぜですか? 次の css を使用して gist の css を変更すると、100px のパディングができます。ここにコード：

div.aspect-ratio {
  width: 200px;
  height: 0;
  position: relative;
}

div.aspect-ratio > div {
  padding-bottom: 50%; /* must be 100px  */
  position: absolute;
  background: blue;
  color: white;
  font-size: 24px;
  text-align: center;
}
于 2013-10-09T09:10:04.500 に答える