여러 인라인 이미지, 각각

Question

에 부동 문자 I가과 같이 서로 내부 div의 옆에 배치되어 여러 이미지 :

<div id='images'> 
    <div class="iphoneimage"> 
     <img src="img1.jpg" height="300"> 
     <h5 class="size">1363 x 2048</h5> 
    </div> 

    <div class="iphoneimage"> 
     <img src="img1.jpg" height="300"> 
     <h5 class="size">1363 x 2048</h5> 
    </div> 
</div> 

이 다음과 같은 CSS로 스타일됩니다

.iphoneimage { 
    overflow: auto; 
    width: 169px; 
    float: left; 
} 
img { 
    position: relative; 
} 
h5.size { 
    position: absolute; 
    top: 200px; 
    left: 20px; 
    width: 100%; 
} 

텍스트를 각 이미지의 맨 위에 표시하려고 시도하지만 현재는 첫 번째 이미지 위에 한 세트의 텍스트 만 표시됩니다. .iphoneimage``에`; 상대 :

Answer 1

봅니다 Fiddle

Answer 2

.iphoneimage { 
    overflow: auto; 
    width: 169px; 
    float: left; 
    position:relative; 
} 
img { 
    position: relative; 
} 
h5.size { 
    position: absolute; 
    top: 200px; 
    left: 20px; 
    width: 100%; 
} 

<div id='images'> 
    <div class="iphoneimage"> 
     <img src="img1.jpg" height="300"> 
     <h5 class="size">1363 x 2048</h5> 
    </div> 

    <div class="iphoneimage"> 
     <img src="img1.jpg" height="300"> 
     <h5 class="size">1363 x 2048</h5> 
    </div> 
</div>