0

お時間を割いていただきありがとうございます。

私は達成したい:

  1. ウィンドウ全体を四角形の div で埋めます。
  2. 1 行に 20 個の正方形が必要です。
  3. ページの読み込み時に jQuery を使用してそれらを追加したい。
  4. 画面が横向きから縦向きに変わるモバイルデバイスは考慮していません。デスクトップ デバイスの幅が異なるだけです。

それらのそれぞれは異なる色を持っているので、私のjavascriptはHTMLコンテナにそれぞれ異なるdivを .append() するループです。

これは追加内のコードです:

"<div class='square' style='background-color:" + color + "; width:5%; height:????;'></div>"

自動高さが二乗比を維持することを望んでいましたが、そうではありません。jQueryを使用して、追加されたdivのピクセルのサイズを取得し、それを使用して高さを設定できますが、ウィンドウのサイズが変更されるたびに同じことをしなければならないため、そのアプローチでは応答性に疑問があります。

これを達成する方法についての考えやアイデアはありますか?

ありがとうございました!

4

1 に答える 1

1

このpadding-bottomトリックを使用して、レスポンシブなサイズが一致する div を作成できます。

デモ

于 2016-04-16T03:01:42.017 に答える