텍스트 위치가 하단에서 오는 것입니다.

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

제목을 위치로 설정 : 절대, 하단 : 0; 여기

Answer 4

내가 당신에게 다른 무언가를 제안 할 수 있습니다, 찾고있는 무엇인가?

이것 좀 봐. fiddle.

제목을 보려면 hover를 추가해야합니다.

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; 
}