Question

现在，我有：

<img style="float:right;" src="/path/to/image.png">
<p>lorem ipsum dolor</p>

这样可以很好地设置图像和周围的文本。然而，是否有可能围绕png图像的实际内容“流动”文本，而忽略了透明度？

现在看起来像这样：

before

我希望它看起来像这样：

我看到的可能性：

1) Manually add breaks

动态内容几乎不可能;

2) Have php add breaks after a set number of characters

非常复杂，需要为每张图片确定;

3) Another way someone here knows about

有没有人有这种情况的经验？

提前致谢！

Answer 1

执行此操作的“正确”方法是CSS3 Shapes / Exclusions（形状 - 外部/内部等）。

不幸的是，截至2013年4月，这些尚未得到广泛实施。 Chrome / Webkit在其金丝雀版本中进行了测试。也许Mozilla会继续。

Answer 2

我能想到的唯一可以想到的方法就是在没有硬编码的情况下将文本包装在图像周围是为了获得jQuery的帮助。有一个名为jQSlickWrap的插件 - 它可能是您正在寻找的解决方案。但是，它确实需要代表浏览器支持HTML5，因此它不适用于IE用户。

Answer 3

任何自动断点检测都会涉及非常复杂的边缘检测，文本度量和流量计算，它们太复杂而且收益很小。

我想到的唯一可行方法是使用覆盖图像的几个浮动框（DIV）手动逼近图像（使用HTML + CSS）。

Answer 4

这绝对是可能的。您只需创建空白元素，其高度等于文本的行高和文本中断的宽度。然后使用clear: both CSS样式将这些元素浮动到文本中，并使图像绝对定位在文本下方的z-index。