html - 将图像居中，而文本覆盖两个 Canvas (左和右)

Question

我有一个像这样的简单文本，内容中间有图片:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <img src="img/foo.png" /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

我想要的是文字在左在右，而图像完全覆盖在中间。看来我可以使用 float ，效果很好，但只能向左或向右。

有没有办法用 css 实现这个，没有任何 hack？

Answer 1

您要实现的是 HTML5 和 CSS3 中非常新的东西，称为 CSS 形状，它允许文本环绕图像和形状。您可以通过此链接了解如何实现此目的 http://www.html5rocks.com/en/tutorials/shapes/getting-started/但缺点是它仅在非常现代的浏览器中受支持。