이미지에 텍스트 위치 지정에 문제가 있습니다.

Question

메시지에 텍스트를 배치 할 때 아래에 빈 공간이 표시되어 문제가 있습니다.

이

은 이미지입니다 :

http://img713.imageshack.us/img713/6513/lllmm.jpg

그리고 이것은 내가 사용하는 CSS 코드입니다. 나는 그 실수가 어디인지를 모른다.

.thumbnail2{ 
    position:relative; 
    width:100%; 
    margin:0 auto; 
} 
.thumbnail2 img{ 
    width:100%; 
     height:auto; 
} 
.thumbnail2 h1{ 
    display:block; 
    position:relative; 
    top:-90px; 
    left: 0; 
    padding-left:5px; 
     background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
} 
.thumbnail2 h1 span{ 
    font-size:34px; 
    letter-spacing: -1px; 
    line-height:40px; 
} 
.thumbnail2 h1 a{ 
    color:#FFF; 
} 

이는 HTML/PHP입니다 (내가 워드 프레스를 사용하고 있습니다) :

<div class="post"> 
        <div class="thumbnail2"> 
         <?php the_post_thumbnail('grandote'); ?> 
         <h1><span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></h1> 
        </div> 
         <div class="excerpt2"><p><?php echo get_excerpt(280); ?></p></div> 
        <div class="clear"></div> 
       </div> 

Answer 1

시도가 상대적으로 위치 요소에 부정적인 마진 추가 :에서

.thumbnail2 h1{ 
    display:block; 
    position:relative; 
    top:-90px; 
    left: 0; 
    padding-left:5px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 

    margin-bottom: -90px; // This should fix it 
} 

Answer 2

무엇 나는 당신이 원하는 것을 모았습니다. 축소판 위에 텍스트를 표시하는 것입니다.

귀하는 .thumbnail2position: relative과 .thumbnail2 h1position: absolute을 제공해야합니다. 이것은 트릭을 수행 할 것이고, 나중에 그의 위치가 자신의 부모 인 div 요소와 관련이있을 때 h1 태그를 올바른 위치에 배치해야합니다.