Я использую следующий код * для отображения галереи с одной строкой:
HTML
<div class="stream-wrap">
<span class="img-wrap">
<img src="http://placekitten.com/200/300" class="vertical"/>
<span class="img-caption">Blah!</span>
</span>
<span class="img-wrap">
<img src="http://placekitten.com/500/200" class="horizontal"/>
<span class="img-caption">Blah!</span>
</span>
</div>
CSS
body, html {
height: 100%;
}
.stream-wrap {
height: 100%;
white-space: nowrap;
}
.img-wrap {
height: auto;
position: relative;
vertical-align: top;
}
img {
height: 100%;
}
.img-caption {
left: 0;
position: absolute;
bottom: -1em;
}
.vertical {
max-height: 300px;
}
.horizontal {
max-height: 200px;
}
JSFiddle: http://jsfiddle.net/Rgp6h/1/
Ну, это работает (в FF), но мне интересно, есть ли решение без абсолютного позиционирования подписи, так как я не люблю мешать естественному отображению элементов HTML.
У кого-нибудь есть идея? Или альтернативы абсолютному позиционированию нет?
Обратите внимание на поведение масштабирования, которое необходимо поддерживать. Это описано в одном из моих предыдущих вопросов или можно увидеть в этом Fiddle.
* Еще раз спасибо James Montage за помощь!
position: absolute
, так как это CSS-свойство, зависящее от браузера. - person Thorsten   schedule 24.10.2013