我怎样才能用右下角的div来包装文字呢？

Question

我怎样才能用右下角的div来包装文字呢？

每次我试着用CSS做一些看似简单的事情，它都不起作用。

我有一个内容div，其中包含一个460x160图像。我要做的就是把图片放在右下角，然后把我的文字包在上面。

<div id="contents">

    <img src="..." />

    text text text text text text ...

</div>

所以我想让它看起来像：

------------------

| text text text |

| text text text |

| text text -----|

| text text |    |

------------------

用左上角或右上角的图像来做这件事就是蛋糕：

#contents img { float:right; }

------------------

| text text |    |

| text text -----|

| text text text |

| text text text |

------------------

现在我该怎么把它推到底部呢？到目前为止，我想出的最好办法是：

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------

| text text      |

| text text      |

| text text -----|

| text text |    |

------------------

在这种情况下，文本不会在边距中打印，因此图像上方有空白。

#contents { position:relative; }

#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:

#contents img { float:right; margin-top:-160; }

------------------

| text text text |

| text text text |

| text text -----|

| text text | te |

------------------

在这种情况下，文本打印在图像的上方或下面。

所以.。我怎样才能做到这一点？