Question

我有一个小的Perl脚本，可以将一些外部图像加载到页面。图像链接（其中50个）都在一个数组中，我迭代通过转储到屏幕。虽然我在Perl方面相当擅长，但我之前从未做过任何Web开发，所以我是一个完整的CSS菜鸟。我在html模板中有以下代码

[% FOREACH dvd IN dvd_chart %]

<div class="thumbnail">
<img  src="[% dvd.thumbnail %]" />
<br>
</div>

[% END %]

CSS就是这样：

.thumbnail
{
float: left;
width: 120px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

编辑：生成的HTML如下所示：

<div class="thumbnail">
<img  src="http://content9.flixster.com/movie/11/16/78/11167831_pro.jpg" />
<br>
Taken 2
</div>
<div class="thumbnail">
<img  src="http://content9.flixster.com/movie/11/16/86/11168615_pro.jpg" />
<br>
The Possession
</div>
<div class="thumbnail">
<img  src="http://content7.flixster.com/movie/11/16/80/11168037_pro.jpg" />
<br>
Won't Back Down
</div>
<div class="thumbnail">
<img  src="http://content9.flixster.com/movie/11/16/51/11165143_pro.jpg" />
<br>
To Rome with Love
</div

问题是图像开始完美加载，前两行很好，但是会有几行只有一个图像，然后是更好的行。没有遗漏的网址。任何人都可以建议可能出现的问题，甚至是将动态图像加载到div中的好教程 - 包装！

Answer 1

我在一个JS小提琴中看了你的HTML和CSS，我立刻看到这是一个问题，任何具有较长电影标题的项目的高度。快速Google搜索“CSS gallery variable height”会显示本教程：http://jonathanweatherhead.com/2012/12/31/how-to-make-a-flowing-css-gallery-layout/

我会遵循这一点。否则，您可能必须为所有图库项目设置高度（不是最佳计划）或限制电影标题的长度（也不是很好）。

CSS图像显示空白？

1 个答案: