컨테이너 하단의 위치 제목

Question

아래 이미지와 같이 제목 태그를 li 태그의 맨 아래에 배치하려고합니다. 따라서 텍스트가 짧은 경우에도 항상 맨 아래에 머무르며 위에 만 확장됩니다.

머리글이 지나치게 튀어 나온 것 같습니다. 어떤 도움이라도 대단히 감사합니다. http://jsfiddle.net/noscirre/JtVGp/1/

<ul style="list-style:none;"> 
    <li style="float:left; width:70px; height:90px; margin:0 10px 10px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; border: 4px solid #0CF; padding:10px; position:relative;"> 
     <a title href="#"> 
      <div style="background:#9F0; width: 50px; height: 50px; float:left; display:block"></div> 
      <h2 style="font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:right; bottom: 10px; position:absolute ">ANOTHER APP</h2> 
     </a> 
    </li> 
</ul> 

Answer 1

등 당신의 CSS는 흰색 공간을 정의 내가 코르를 이해했다면 ectly 당신이 원하는 :

이 헤더에 right: 5px를 추가 -이 의지 공간을 리튬의 오른쪽 가장자리에서이

당신이 right 및 width의 값으로 놀 수 overspilling처럼 보이게되지 않도록 원하는 결과를 얻을 수 있습니다.

Answer 2

헤이 코드에서 한 줄의 CSS를 추가 참조하시기 바랍니다

이

white-space: pre; 

라이브 데모 http://jsfiddle.net/JtVGp/2/