divの下部に画像を配置するにはどうすればよいですか？

Question

Htmlタグ画像をdivタグの下部と同じ高さにしたいです。これを達成する方法を見つけることができないようです。

これが私のHTMLです。

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

問題は、divがパディングまたはマージンがある他のdiv内にネストされていることです。

Answer 1

ラッピングdivタグに相対配置を追加し、次のように画像を絶対に配置します。

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>

これで、画像がdivの下部に配置されました。