フォーラムに投稿するのはこれが初めてで、私は決して Web 開発者ではありませんが、学習しながら学んでいます。
私が抱えている問題はhttp://www.audiofactory.co.ukです。
一部のページには音楽プレーヤーがあります。ワードプレスのプラグインで作成。例については、以下のページを参照してください。
-services/audio-books/
-services/voiceovers/
-services/voicereels/
-/services/radiocontent/
-/our-team/voice-talent/
特定のページに特定の幅を与えるために、各プレーヤーのいくつかの CSS スタイルを編集しました。
/* ===== "voicetalent" ===== */
.voicetalent div.playlist-colour { position:absolute; height:115px }
.voicetalent div.playlist-wrap-MI ul { position:static; height:115px }
/* ===== "voicereels" ===== */
.voicereels div.playlist-colour { position:absolute; height:207px }
.voicereels div.playlist-wrap-MI ul { position:static; height:207px }
/* ===== "audiobooks" ===== */
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
http://www.audiofactory.co.uk/services/audio-books/を見る と、ブラウザ ウィンドウのサイズを変更すると、プレーヤーのサイズが期待どおりに変更されず、左側の画像に重なることがわかります。 . ブラウザの幅を変更するときにプレーヤーの幅を自動調整して、すべてが相対的に保たれるようにしたいと思います。
音楽プレーヤー プラグインの開発者と話をしたところ、彼はこれを提案しました。
これは単なるマークアップの問題のようです。ショートコードで「pos」パラメーターを使用するか、指定された幅の別のフローティング div でショートコードをラップすることにより、画像だけでなくプレーヤーもフローティングするとおそらく機能します。
指示はあまり具体的ではなかったので、これらの提案をどのように実装するかが少しわかりませんでした.
短いコードを<div>そのようにラップしようとしましたが、おそらく完全に間違っています。
/* ===== "audiobooks" ===== */
<div position:float;>
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
</div>
あなたが提供できるどんな助けも本当に感謝しています.