让Markdown中的图片靠左放置

前言

在markdown中可以用<img src="图片地址">来放置图片

也就意味着应该也可以通过style来改变图片属性 （在Markdown图片语法中使用HTML属性style，并为其设置float:left属性），比如

![image](image-url.png){style="float:left; margin-right:10px;"}

下面来演示

正常居中

这是图片文字
<img src="https://s2.loli.net/2023/05/13/Vy3UC6qPJg57xG8.png" alt="CleanShot 2023-05-13 at 18.33.20@2x" style="zoom: 33%" />

这是图片文字

图片居左

这是图片文字
<img src="https://s2.loli.net/2023/05/13/Vy3UC6qPJg57xG8.png" alt="CleanShot 2023-05-13 at 18.33.20@2x" style="zoom: 33%;float:left; margin-right:10px;" /><div style="clear:both;"></div>

这是图片文字

注意这里我多放了一行代码

是因为上面这种方法会将图片从正常的文本流中解脱出来，并让周围的文本围绕其它的边缘流动。如果想让图片重新回到正常的文本流中，需要在图片下面插入一个元素，以清除浮动效果。

<div style="clear:both;"></div>

问题排版

可见这里的文本被放置到了图片右边

这是图片文字<img src="https://s2.loli.net/2023/05/13/QBp837tamDwIXHh.png" alt="CleanShot 2023-05-13 at 18.33.20@2x" style="zoom: 33%;float:left; margin-right:10px;" /><div style="clear:both;"></div>

这是图片文字

---

总结

要想让Markdown中的图片靠左放置，可以用

![image](image-url.png){style="float:left; margin-right:10px;"} <div style="clear:both;"></div>