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 - 這包裝！

來源

2013-03-23 user2202355

你有活的鏈接嗎？或例子？ – 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/

我會跟着。否則，您可能必須爲所有圖庫項目設置高度（不是最佳計劃）或限制電影標題的長度（也不是很好）。

來源

2013-03-23 15:30:35 Sara

CSS圖像顯示空白？

回答

相關問題