0

私はウェブ開発でPython/Flaskを学ぶために小さなアプリに取り組んでいますが、私が抱えている問題はCSS / javascriptに関連していて、それを理解することができません。実際の動作を見てみましょう。

  1. http://sareon.pythonanywhere.com/にアクセスします
  2. ゲームID「20234」を入力してください
  3. 左側の画像を数回クリックして、いくつかの新しいdivレイヤー/画像を作成します
  4. ブラウザのサイズを変更し、新しく作成された画像がクリックした場所に留まらないように注意してください。

これを修正する方法がわかりません。

絶対的な位置にある.puckCSSのせいだと思いました。相対に変更すると、クリックした場所と一致しなくなりますが、ブラウザのサイズを変更しても移動しません。静的では、クリックした場所に関係なく、すべてが画像の側面に沿って整列します。Fixedはabsoluteと同じことをします。

だから私はこれを理解する方法がわかりません

4

2 に答える 2

2

それらをposition: relativeコンテナに入れてみてください。そうすれば、各パックはまだ残っているはずposition: absoluteです。

于 2013-03-25T19:55:41.550 に答える
1

各.puck要素を「絶対に」配置しています。原点（左：0、上：0）の値は、.puckの親要素の1つから取得する必要があります。.puckの親要素には「position」プロパティが明確に定義されていないため、デフォルトではブラウザウィンドウの左上になります。

修正？#hockeyRinkHome要素に「position：relative」を追加します。このように、.puck要素が配置されているとき、それは#hockeyRinkHome要素への1つのdivのみをトラバースし、その要素からの絶対位置をベースにすることを決定します。左上隅が新しいものになります（左：0、上：0）。

各.puckを配置するために、計算を再調整する必要があります。ただし、これで常に安定して一定に保たれます。

于 2013-03-25T20:08:02.473 に答える