0

我有一个小的 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

问题是图像开始完美加载，前两行很好，但随后会有几行只有一张图像，然后是更多好的行。没有丢失的 URL。任何人都可以建议可能出了什么问题，甚至可以建议将动态图像加载到 div 中的好教程 - 包装！

4

1 回答 1

2

我在 JS fiddle 中查看了您的 HTML 和 CSS，我立即发现这是任何具有较长电影标题的项目的高度问题。在 Google 上快速搜索“CSS 库可变高度”会显示本教程：http: //jonathanweatherhead.com/2012/12/31/how-to-make-a-flowing-css-gallery-layout/

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

于 2013-03-23T15:30:35.070 回答