2013-03-23 3 views
0

У меня есть небольшой скрипт Perl, который загружает некоторые внешние изображения на страницу. Ссылки на изображения (50 из них) находятся внутри массива, который я перебираю, чтобы сбрасывать экран. Хотя я достаточно хорош в Perl, я никогда не делал никаких веб-разработчиков, поэтому я полный noob с CSS. У меня есть следующий код в шаблон 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; 
} 

EDIT: Сгенерированный 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 -that wraps!

+0

у вас есть прямая ссылка? или пример? – Martyn0627

+0

Попробуйте установить высоту в .thumbnail или осмотрите элемент и проверьте, загружено ли изображение f.e ... – hjuster

+0

Хорошо, вы можете показать нам сгенерированный HTML? –

ответ

2

Я взглянул на ваш HTML и CSS в скрипте JS, и я сразу понял, что это проблема с высотой любого элемента с более длинным названием фильма. Быстрый поиск Google для «высоты переменной галереи CSS» вызывает этот урок: http://jonathanweatherhead.com/2012/12/31/how-to-make-a-flowing-css-gallery-layout/

Я бы это сделал. В противном случае вам может потребоваться установить высоту для всех элементов галереи (не лучший план) или ограничить длину названий фильмов (также не очень).

Смежные вопросы