CSS图像显示空白？

问题描述：

我有一个小的Perl脚本的页面加载一些外部图像。图像链接（其中50个）都在一个数组内，我将其迭代转换为屏幕。虽然我相当擅长Perl，但我从未做过任何Web开发，所以我是一个完全使用CSS的noob。我在HTML模板下面的代码CSS图像显示空白？

[% 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 - 这包装！

你有活的链接吗？或例子？ – Martyn0627 2013-03-23 13:51:48

尝试将高度设置为.thumbnail或检查元素，并检查图像是否正在加载f.e ... – hjuster 2013-03-23 13:54:35

好的，你能告诉我们生成的HTML吗？ – 2013-03-23 14:01:54

答

我在一个JS小提琴中看了一下你的HTML和CSS，而且我马上就看到这是任何带有较长电影标题的项目的高度问题。快速谷歌搜索“CSS画廊变量高度”带来本教程：http://jonathanweatherhead.com/2012/12/31/how-to-make-a-flowing-css-gallery-layout/

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

CSS图像显示空白？

相关推荐