css - css的奇怪行为，刷新后修复

Question

我正在尝试建立一个用户浏览某些 Flash 游戏的页面，并<div>为他们创建缩略图。一开始效果很好，但是当我点击一个游戏，然后返回浏览页面时，文字与图像重合，当我刷新时，就可以了。

错误版本：（返回后）

正确版本：（开始时和刷新后）

没有运行 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不做任何事情。我知道您提到您尝试过它并且它有效，但我向您保证它不是必需的。

更新了小提琴。