Jak umieścić obraz na dole elementu div?

Question

Chcę, aby obraz html był na równi z dnem znacznika div. Nie mogę znaleźć sposobu, aby to osiągnąć.

Tu jest mój HTML:

<div class="span8"> 
    <img src="/img/play-shot1.jpg" class="text-center shadow"> 
</div> 

Problemem jest to, że div jest zagnieżdżony w innym div, które mają wyściółkę lub marże.

Answer 1

Dodaj względną pozycję do znacznika zawijania div, a następnie bezwzględnie umieścić obraz w to tak:

CSS:

.div-wrapper { 
    position: relative; 
    height: 300px; 
    width: 300px; 
} 

.div-wrapper img { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

HTML:

<div class="div-wrapper"> 
    <img src="blah.png"/> 
</div> 

Teraz obraz siedzi na spód div.