hexo、markdown图片并行显示

1.markdown图片显示方法

1.1 Alt text

1
![Alt text](https://img-blog.csdnimg.cn/20190811133756709.png "optional title")

效果：
Alt text

Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接：可以是图片的本地地址或者是网址。”optional title”：鼠标悬置于图片上会出现的标题文字，可以不写。

1.2 插入本地图片 ![avatar]

只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。
例如：

1
![avatar](/home/picture/1.png)

不灵活不好分享，本地图片的路径更改或丢失都会造成markdown文件调不出图。

只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。

效果：
avatar

1.3 控制图片大小的插入网络图片

1
2
3
<center>
<img src="https://img-blog.csdnimg.cn/20190811133756709.png" width = "400" height = "302" alt="图片名称" align=center />
</center>

效果如下所示：

图片名称

2.markdown图片并行显示

以上两种方法无法将图片并行显示：
于是尝试如下方法：但均无法满足需求

2.1 方法1

1
2
3
4
5
6
<center class="half">
    <img src="https://img-blog.csdnimg.cn/20190811133756709.png" width="100"/> <img src="https://img-blog.csdnimg.cn/20190811133756709.png" width="100"/>  <img src="https://img-blog.csdnimg.cn/20190811133756709.png" width="100"/>
</center>
<center class="half">
    <img src="https://img-blog.csdn.net/2018061215200776?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODA4OTYx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="200"/><img src="https://img-blog.csdn.net/20180612152032532?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODA4OTYx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="200"/><img src="https://img-blog.csdn.net/20180612152100203?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODA4OTYx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="200"/>
</center>

效果：


该方法在markdown中显示为并行但是hexo页面中却不能满足需求。

2.2 方法2

1
2
3
4
5
6
<center>
<figure>
<img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" />
<img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" />
</figure>
</center>

效果：


</center>
该方法也不满足要求

2.2 方法3

1
2
3
4
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png"  width="200" height="200" ></div>
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png"  width="200" height="200" ></div>
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" width="200" height="200" ></div>
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" width="200" height="200" ></div>
该方法满足需求 但是没有空行，需要在最后加入一行 
1
2
3
<div style="float:none;clear:both;">

</div>