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

Question

每次我尝试在 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 |
------------------

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

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

Answer 1

肯定有人问过before (2003) , 和 before (2002) , 或 before (2005)

最后一个链接实际上建议 javascript-based solution ，但对于固定(即非流体)解决方案。

然而，它与 other advices found 是一致的

The only way to do that is to put the floated element somewhere in the middle of the text. It's impossible to get it perfect all of the time.

或this one :

It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).

无论如何，作为discussed in this thread ，没有简单的解决方案...

---

Cletus在评论中提到这个thread from 2003 ，这再次说明了它不容易实现的事实。
但是，它确实引用了这个 Eric Meyer's article , 这接近您想要达到的效果。

By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.
Because floats were not originally intended to be used for layout, some hacks may be necessary to make them behave as intended. This can involve floating elements that contain floats, "clearing" elements, or a combination of both.

---

然而，Chadwick Meyer建议 his answer基于 :before CSS selector 的解决方案(Leonard 的 answer 的变体)。
它确实 work here .

---

2021 年 4 月更新:Temani Afif建议 his answer使用 Flexbox 结合 shape-outside。
但是请查看 Backwards Compatibility of Flexbox , 即使 its support所有浏览器都很好。