references

html方案

  • 效果不够理想/不够稳定
  • 依赖于html属性调制
  • 多个​​<img>​​间不要使用的换行
<img src="https://raw.githubusercontent.com/xuchaoxin1375/pictures/main/imagesimage-20220611203203763.png"   width="280"/><img src="https://raw.githubusercontent.com/xuchaoxin1375/pictures/main/imagesimage-20220611203203763.png"  width="200" />

markdown_图片并排的方案_htmlmarkdown_图片并排的方案_html

table 方案(较为通用)

注意,使用表格方案的时候,不要又多余的换行!

  • 演示源代码
| p1(optional) | p2(optional |
|--|--|
| ![p1](https://s4.51cto.com/images/blog/202206/14140105_62a82421eb24e22406.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) | ![p2](https://s4.51cto.com/images/blog/202206/14140105_62a82421eb24e22406.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) |

效果(by table)

p1(optional)

p2(optional

markdown_图片并排的方案_github_03

markdown_图片并排的方案_github_03

typora编辑器的渲染

markdown_图片并排的方案_ide_05

  • typora下设置的演示源码

主要利用html属性来设置


<img src="https://raw.githubusercontent.com/xuchaoxin1375/pictures/main/imagesimage-20220611203213594.png" alt="image-20220611203213594" style="zoom: 80%;" /><img src="https://raw.githubusercontent.com/xuchaoxin1375/pictures/main/imagesimage-20220611203236335.png" alt="image-20220611203236335" style="zoom:80%;" />![image-20220611203203763](https://raw.githubusercontent.com/xuchaoxin1375/pictures/main/imagesimage-20220611203203763.png)

markdown_图片并排的方案_html_06