CSS를 사용하여 하단에 div 필수 항목을 설정하는 방법은 무엇입니까?

Question

이 내 제품에 대한 DIV, 당신은 다음과 같이 데모를 볼 수 있습니다

<div class="productItem"> 
     <div> 
       <!--image --> 
     </div> 
     <div> 
       <!--text --> 
     </div> 
    </div> 

http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg

각 제품은 제품 이미지와 제품 텍스트가 있습니다. 이미지가 상단에 있고 텍스트가 각 이미지 아래에 있습니다. 그러나 이미지가 다른 크기를 가질 수 있음을 알 수 있습니다. 따라서 이미지 바로 아래가 아닌 아래쪽에 항상 텍스트를 넣고 싶지는 않습니다. 절대 위치를 지정하는 것 이외에 텍스트를 아래쪽에 배치해야하는 방법은 무엇입니까?

Answer 1

이미지를 표준 크기로 만드는 것을 고려해 볼 가치가 있습니다. 아마도 크고 작은 크기일까요? 누군가가 더 작은 이미지를 클릭하면 더 큰 이미지를 보여줄 수있는 옵션이 언제나있을 수 있습니다.

당신은 또한이 같은 것을 사용하여 HTML을 단순화 수 :

<div class="productItem"> 
    <img class="large" /> 
    <p>Text</p> 
</div> 

이 당신이 CSS (그것에게 수업을 제공함으로써) 이미지에 따라 변경, 불필요한 DIV 년대를 감소 할 것이다.

아마 block 속성을 사용하여 이미지 위에 텍스트가 표시되도록할까요?

img {display:block;} 

Answer 2

상당히 간단한 것처럼 보일 것입니다.

<style type="text/css"> 
.productItem { 
    text-align: center; 
} 

<div class="productItem"> 
    <img src="whatever"><br style="clear: both;" /> 
    Text 
</div> 

아마도 내가 이해하지 못하는 것이 더 있습니다.

Answer 3

캡쳐 화면에서 텍스트가 항상 이미지 아래에있는 것처럼 보입니다.하지만 스크린 샷의 오른쪽 절반에는 작은 이미지가 큰 이미지와 같은 행에있는 경우 텍스트가 줄 지어 있지 않습니다 제품 설명이 셀의 맨 아래에 있지 않음). 그게 네가 묻고있는거야? 이미지 크기가 다를 때 텍스트를 모두 행 하단에 정렬시키는 방법은 무엇입니까?

모든 제품을 포함하는 테이블 행을 <tr valign="bottom">으로 설정하면 모든 것을 맨 아래로 이동하여 이미지를 텍스트 위에 쌓을 수 있습니다. 이것은 작은 이미지가 모두 그들의 바닥이 서로가 아닌 꼭대기가되도록한다는 것을 의미합니다. 이미지를 계속 유지하면서 텍스트가 아래로 향하게하려면 대신 DIV 이미지의 스타일을 다음과 같이 지정하십시오 : <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. 이렇게하면 더 작은 이미지를위한 더 큰 자리 표시자가 만들어져 그 아래에있는 텍스트가 모두 정렬되고 이미지가 너무 크면 이미지가 늘어나서 텍스트가 모두 라인을 벗어나게됩니다.

<div class="productList"> 
<div class="productItem"> 
    <div> 
     <!--image --> 
    </div> 
    <div class="productText"> 
     <!--text --> 
    </div> 
    </div> 
<div class="productItem"> 
    <div> 
     <!--image --> 
    </div> 
    <div class="productText"> 
     <!--text --> 
    </div> 
    </div> 
</div> 

난 당신이 절대 위치를 사용하려는 해달라고 이유를 알고하지 않습니다하지만이있는 유일한 해결책이다 :

Answer 4

나는 당신이 그렇게

는 그런 일해야 productItem

의 컨테이너가 있다고 가정 case (이미지 또는 div에 고정 된 높이를 지정하지 않고).

이 설정은 아무런 상처를주지 않으며 ie6을 포함한 모든 최신 현대 브라우저에서 작동합니다. 제품 텍스트의 다른 클래스 이름을 지정하거나 주소를 지정하기 위해 다른 태그를 사용하면됩니다.

는 CSS :

.productsList {background:#f00; overflow:hidden;height:1%;position:relative;} 
.productItem {float:left;background:#ff0;} 
.productText {bottom:0;position:absolute;text-align} 

이 시도. 완벽하게 작동해야합니다

다른 솔루션은 MidnightLightining에 의해 작성되었습니다. 이미지 컨테이너의 고정 높이를 사용합니다.