Текстовое положение, приходящее снизу

Question

В принципе, у меня есть заголовок внутри изображения. Как вы можете заметить из приведенного ниже кода и примера, я установил отрицательный край верхнего края, чтобы поместить его внутри изображения, внизу. Проблема в том, что текстовая позиция/ориентация сверху вниз. Имея в виду, что чем больше текста имеет название, тем дольше оно будет внизу. Я хочу сделать его обратным - так что текст div расширяет текст вверх, в зависимости от его размера.

Возможно ли это? Заранее спасибо.

Вот пример http://jsfiddle.net/j7gLd/

HTML

<div class="image"> 
    <img src="image.jpg"> 
    <div class="title">This is a title</div>  
</div> 
<div class="image"> 
    <img src="image.jpg"> 
    <div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</div>  
</div> 

CSS

.image { 
    width: 800px; 
    height: 530px; 
    margin: 10px; 
} 
.title { 
    position: absolute; 
    background-color: #CCC; 
    max-width: 600px; 
    margin-top: -80px; 
    padding: 5px;  
} 

Answer 1

Вот то, что вы ищете, дайте .image position:relative и .title bottom:0;fiddle

<div class="image"> 
    <img src="http://s23.postimg.org/g033nno17/image.jpg"/> 
    <div class="title">This is a title Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.</div>  
</div> 
<div class="image" style="background:red;"> 
    <img src="http://s23.postimg.org/g033nno17/image.jpg"/> 
    <div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a titl Lorizzle ipsizzle dolor crunk amizzle, consectetizzle adipiscing get down get down. Mofo dawg velizzle, shiz volutpat, suscipit quis, gravida vel, pimpin'. Pellentesque eget tortor. Sed erizzle. Dope at dapibizzle away tempus shiz. Maurizzle pellentesque nibh black turpizzle. Doggy izzle tortizzle. Pellentesque eleifend rhoncus crunk. In hac habitasse funky fresh dictumst. Donec dapibizzle. Curabitizzle tellizzle fo shizzle my nizzle, pretizzle own yo', that's the shizzle away, shizznit vitae, nunc. Stuff suscipit. Dawg sempizzle velit sizzle pizzle.e</div>  
</div> 

.image { 
    width: 820px; 
    height: 530px; 
    margin: 10px; 
    position:relative; 
} 
.title { 
    position: absolute; 
    display:block; 
    background-color: #CCC; 
    padding: 5px; 
    bottom:0; 
    width:790px; 
    vertical-align:bottom; 
} 

Answer 2

ли vertical-align то, что вы ищете?

Answer 3

Укажите название позиции: absolute; bottom: 0;

Answer 4

Могу ли я предложить вам что-то другое?

Посмотрите на этот fiddle.

Также добавлен указатель, чтобы увидеть заголовок.

HTML

<div class="image" style="background-image: url('http://placekitten.com/200/150');"> 
    <div class="footerBar">Small Title</div> 
</div> 

<div class="image" style="background-image: url('http://placekitten.com/200/150');"> 
    <div class="footerBar">Very Very Very Very Very Very Very Very Very Very Very Very Very Long Title</div> 
</div> 

CSS

.image { 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 
.footerBar { 
    background-color: lightGrey; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
    display: none; 
    word-wrap:break-word; 
} 
.image:hover .footerBar { 
    display: block; 
}