markdown 图片并排显示

最新推荐文章于 2025-05-14 11:07:58 发布

wanttifa

最新推荐文章于 2025-05-14 11:07:58 发布

阅读量1.7k

点赞数

分类专栏：常用工具与环境配置

常用工具与环境配置专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何在Markdown中实现图片的正确排版，包括不同方式的图片排列、居中及左对齐显示，并通过实际代码示例展示了如何调整图片大小以达到理想的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要一张图片接着一张图片的写，中间不能有换行。如果换行的话则图片也换行
正确的写法：

![描述](图片链接)![描述](图片链接)![描述](图片链接)

错误的写法：换行

![描述](图片链接)
![描述](图片链接)
![描述](图片链接)

居中并排：

正确写法：注意两个之间不要换行，如果图片太大的的话可以设置图片的宽度或者高度，这样图片就会缩放。注意不要同时设置宽度和高度，这样的话不好把握宽度和高度的比例，可能会是图像变形。

<center class="half">
    <img src="图片链接" width="200"/><img src="图片链接" width="200"/><img src="图片链接" width="200"/>
</center>

实例：

<center class="half">
    <img src="https://i-blog.csdnimg.cn/blog_migrate/c25add330fd95f8074acc638a303fd56.png" width="200"/><img src="https://i-blog.csdnimg.cn/blog_migrate/18a18894256a125383ef3db70406df42.png" width="200"/><img src="https://i-blog.csdnimg.cn/blog_migrate/4d6f7735565d44a50fba96992d74c489.png" width="200"/>
</center>

显示结果：

# 左对齐并排：还是注意所有的标签写在一行中不要换行。

<figure class="third">
    <img src="https://i-blog.csdnimg.cn/blog_migrate/c25add330fd95f8074acc638a303fd56.png" width="200"/><img src="https://i-blog.csdnimg.cn/blog_migrate/18a18894256a125383ef3db70406df42.png" width="200"/><img src="https://i-blog.csdnimg.cn/blog_migrate/4d6f7735565d44a50fba96992d74c489.png" width="200"/>
</figure>

显示效果：