Markdown_图片并排的方案

本文最后更新于：2024年11月13日 下午

markdown_图片并排的方案

html方案

  • 效果不够理想/不够稳定
  • 依赖于html属性调制
  • 多个<img>间不要使用的换行
1
<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" />

14140105_62a82421eb24e22406.webp
14140105_62a82421eb24e22406.webp

table 方案(较为通用)

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

  • 演示源代码
1
2
3
| 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编辑器的渲染

14140106_62a82422452a714650.webp

  • typora下设置的演示源码

主要利用html属性来设置

1
<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)

14140106_62a824225ef3661092.webp