html - 是否可以在图像周围包裹文本，如下所示

我需要像这样在图像周围环绕文本
我使用了以下Css技巧

img {
    float: left;
    margin: 0 20px 20px 0;
}

p {
    text-align: justify;
    text-indent: 2em;
}

但我得到的结果是这样的

最佳答案

您可以使用shape-outside属性。但恐怕并非所有浏览器都支持它。
参见参考文献：https://css-tricks.com/almanac/properties/s/shape-outside/
浏览器支持：https://caniuse.com/#search=shape-outside

.element{
  shape-outside: url(https://png.icons8.com/metro/300/right-footprint.png);
  shape-image-threshold: 0.5;
  float: left;
}

<img class="element" src="https://png.icons8.com/metro/300/right-footprint.png" />
<p>Lorem ipsum dolor sit amet, ut possit iudicabit usu, ea est detracto intellegat, minim splendide pertinacia te nec. Eu eos elit eripuit bonorum. Eu qui decore indoctum, qui elitr propriae intellegat id. Mei fabulas oporteat postulant eu. Eam at denique vituperata, eu quo ullum oblique, ne prompta iudicabit ius.

Te paulo audire adipisci eum. Has unum errem blandit in, integre dolorem graecis cum ex. Cum at doctus voluptaria voluptatibus. Cibo facilisi abhorreant cu cum. Mei ex zril lucilius. Vix scripserit persequeris ne, cu etiam disputando mea.

Sed ei tollit commune consequat, te alii cibo eleifend mel. Meis bonorum usu eu. Ea graecis necessitatibus ius. Semper utamur usu eu, utinam consectetuer his ei, id decore perpetua per.

Est ea modo dico tota, habeo lobortis suscipiantur te vix, viris altera principes ea eos. Wisi verear ei duo, magna partem vulputate ei mei. Cum ad purto prima legere, erant audire qui at. Nominati constituto repudiandae ut sed, mei cu porro error pericula, ad mollis pertinax principes est. Sed evertitur temporibus philosophia ne, ne zril integre temporibus qui, his option postulant assentior ne. Id mea labore appellantur, has hinc populo cu, at vis elitr everti torquatos.

Hinc purto illum an vis, nam tation sensibus at, reque munere complectitur id sed. Vel everti assentior conceptam te. Vel ut reque dolorum assentior, apeirian liberavisse at nam, vix at regione evertitur temporibus. Blandit persecuti sadipscing no mei.</p>

关于html - 是否可以在图像周围包裹文本，如下所示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51318254/