css - css の奇妙な動作、更新後の修正

Question

ユーザーが特定のフラッシュ ゲームを閲覧するページを構築しようとしており<div>、それらのサムネイルを作成しています。最初はうまく動作しますが、1 つのゲームをクリックしてブラウズ ページに戻ると、テキストが画像と一致し、更新すると問題なく表示されます。

間違ったバージョン: (戻った後)

正しいバージョン: (開始時および更新後)

JavaScript は実行されていないため、要素のスタイルは変更しません。問題の<div>ある には、次のような .css コードがあります。

div.game_side_texts
{
clear:right;
float:top; 
max-height:80%;
}

img.gamethumb
{
height:80%;
}

div.game_img_div
{
float:left;
margin-right:2%;
min-width:30%;
}

.game_thumbnail_div /* the div that contains everything */
{
float:left;

width:40%;
height:20%;

margin-top:6%;
margin-right:1%;

padding-bottom:3%;
}

では、何が問題になるのでしょうか？前もって感謝します ！

Answer 1

まず.game_thumbnail_div、幅と高さが小さすぎます。それらを削除するか、寸法を少なくとも 286 x 140 にしてください。また、float:top何もしません。試してみてうまくいったとおっしゃっていましたが、必要ないことをお約束します。

フィドルを更新しました。