如何使用 CSS 在图像周围环绕文本？

Question

我需要在一个块中显示文本和图像（见图像）。 我将图像放低了一点，以便清楚地表明图像覆盖了一些文本。 文本应该从顶行开始，因此在图像上方，但此后应该继续在图像的右侧。

我尝试在图像上使用float:left来执行此操作，该方法有效，但随后所有文本都移到了图像的右侧。 当我使用 position:absolute 时，图像位于文本的顶部。 如果我将float:left与transform: translateY那么文本也会显示在图像的右侧并且不会在图像周围流动。

我知道这可以通过 shape-outside 属性实现，但不幸的是，我的许多用户使用不受支持的浏览器。

Answer 1

如果它只有大约一行并且图像的宽度已知，您可以考虑以下带有负边距和伪元素的技巧：

 p:before { content:""; display:inline-block; margin-right:-100px; /* Same as width */ } img { float:left; margin-top:1.2em; margin-right:5px; } /*Clear float*/ p:after { content:""; display:table; clear:both; }

 <p style="font-size:25px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem </p> <p style="font-size:20px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem </p>