如何将文本环绕在右下角的 div 周围？

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

我有一个包含 460x160 图像的内容 div。我想要做的就是将图像放置在右下角，并将文本环绕在其周围。

<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 |
------------------

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

那么...我怎样才能做到这一点呢？

看来确实有人问过之前（2003年） https://web.archive.org/web/20181202092251/http://archivist.incutio.com/viewlist/css-discuss/72206, and 之前（2002年） https://web.archive.org/web/20170421105556/http://archivist.incutio.com/viewlist/css-discuss/12645, or 之前（2005年） https://web.archive.org/web/20181026000119/http://archivist.incutio.com/viewlist/css-discuss/57221

最后一个链接实际上建议了一个基于javascript的解决方案 http://www.xs4all.nl/%7Ejer03n/sandbox/float-bottom-right.html，但对于固定（即非流体）解决方案。

然而，它是一致的发现其他建议 http://forums.devshed.com/css-help-116/float-right-issue-496358.html

唯一的方法是将浮动元素放置在文本中间的某个位置。想要一直完美是不可能的。

Or this one http://www.webmasterworld.com/css/3528809.htm:

它包括浮动一个垂直的“推杆”元素（例如 img，但使用空 div 可能更聪明），然后使用clear属性将所需的对象浮动在其下方。此方法的主要问题是您仍然必须知道文本有多少行。它使事情变得更容易，而且绝对可以用javascript编码，只需将“推动器”的高度更改为容器的高度减去浮动的高度（假设您的容器不是固定/最小高度） 。

无论如何，作为在此线程中讨论 http://bytes.com/groups/css/99882-floating-image-bottom-right-div，没有简单的解决方案......

Cletus https://stackoverflow.com/users/18393/cletus评论里提到了这个2003年的话题 http://www.ozoneasylum.com/11041，这再次说明了它不容易实现的事实。
不过，它确实指的是这个埃里克·迈耶的文章 http://www.complexspiral.com/publications/containing-floats/，这已经接近您想要达到的效果了。

通过了解浮动和正常流动如何相互关联，并了解如何使用清除来操纵浮动周围的正常流动，作者可以将浮动用作非常强大的布局工具。
由于浮动最初并不打算用于布局，因此可能需要一些技巧才能使它们按预期运行。这可能涉及包含浮动的浮动元素、“清除”元素或两者的组合。

Yet, 查德威克·迈耶 https://stackoverflow.com/users/3334390/chadwick-meyer建议在他的回答 https://stackoverflow.com/a/54765318/6309一个基于的解决方案:beforeCSS 选择器 https://www.w3schools.com/cssref/sel_before.asp（的变化Leonard https://stackoverflow.com/users/405975/leonard's answer https://stackoverflow.com/a/12091501/6309).
确实如此在这里工作 https://codepen.io/chadwickmeyer/pen/gqqqNE.

2021 年 4 月更新：特马尼·阿菲夫 https://stackoverflow.com/users/8620333/建议在他的回答 https://stackoverflow.com/a/67180791/6309使用 Flexbox 与 shape-outside 相结合。
但请检查一下Flexbox 的向后兼容性 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox， 虽然它的支持 https://caniuse.com/flexbox所有浏览器都非常好。