Выравнивание текста в правой нижней части изображения

Question

Я использую следующий код, чтобы выровнять надпись в правой нижней части изображения. Код работает хорошо.

Мне было интересно, можно ли переписать его без указания минимальной ширины контейнера с картинками (.picture class). При отсутствии ширины подпись уменьшается при изменении размера окна браузера:

<div class="picture"> 
    <img src="image.jpg"> 
    <div class='captioning'> 
     <div class='title'>text</div> 
     <div class='caption'>text</div> 
    </div> 
</div> 

.picture { 
    position: relative; 
    overflow: hidden; 
    min-width: 1200px; 
} 
.picture img { 
    float: left; 
} 
.picture .captioning { 
    float: left; 
    width: 150px; 
    margin: 0 0 0 15px; 
} 
.picture .captioning .caption { 
    position: absolute; 
    bottom: 0; 
} 
.picture .captioning .title { 
    position: absolute; 
    bottom: 0; 
} 

Любые идеи?

Заранее спасибо

Answer 1

Я нашел решение. Я использовал дисплей: встроенный блок как на изображении и подписи, а также Пробельные: Nowrap на контейнере:

.picture { 
    position: relative; 
    overflow: hidden; 
    white-space: nowrap; 
} 
.picture img { 
    display: inline-block; 
} 
.picture .captioning { 
    display: inline-block; 
    width: 150px; 
    margin: 0 0 0 15px; 
    white-space: normal; 
} 
.picture .captioning .caption { 
    position: absolute; 
    bottom: 0; 
} 
.picture .captioning .title { 
    position: absolute; 
    bottom: 0; 
}