Применить изображение в правом нижнем углу

Question

Мне нужно нанести небольшое изображение, маленький значок, (внизу справа) на несколько миниатюр галереи. Код генерируется автоматически плагином и выглядит следующим образом. Я не могу изменить порядок тегов, но я могу редактировать две строки, помеченные * (т.е. добавление классов, изменяющихся от span до div) Он работает с верхним, но не с нижним (верх: 0px; справа: 4px) не знаю почему.

<a href="/photos/fullpic.jpg"> 
<span> 
*<span style="position: relative; display: block;"> 
    <img src="/photos/mythumbnail.jpg" alt="thumbnail"> 
    *<img src="/photos/plugins/badge.png" style="position: absolute; bottom: 0px; right: 4px;"> 
    </span> 
</span> 

редактировать: Забыл добавить. Каждый эскиз имеет разную высоту/ширину, поэтому я не могу объявить высоту для контейнера. Он должен придерживаться нижнего правого, независимо от размера контейнера.

Answer 1

Он отлично работает для меня, но вы должны удалить display:block; для <span>

на Что такое «обертка» <span>?

Answer 2

одна проблема заключается в display:block как упомянуто @MatTheCat, другие пробельные и текст, который находится внутри диапазона ..

вы должны либо обернуть текст внутри двускатной/дел вместе со значком и множества, для размещения относительно друг друга. для белого пространства вы можете установить font-size и line-height - 0.

пример: http://jsfiddle.net/PEmEy/