Github Markdown 图片如何并排显示

Posted tsingke

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Github Markdown 图片如何并排显示相关的知识,希望对你有一定的参考价值。

 

 Github Markdown 图片如何并排显示

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

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

实例: 
技术图片技术图片技术图片 
错误的写法:换行

![描述](图片链接)
![描述](图片链接)
![描述](图片链接)
  • 1
  • 2
  • 3

实例: 
技术图片 
技术图片 
技术图片

居中并排:

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

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

实例:

<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>
  • 1
  • 2
  • 3

显示结果: 


技术图片技术图片技术图片 

 

左对齐并排:

还是注意所有的<img>标签写在一行中不要换行。

<figure class="third">
    <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"/>
</figure>
  • 1
  • 2
  • 3

显示效果: 


技术图片技术图片

以上是关于Github Markdown 图片如何并排显示的主要内容,如果未能解决你的问题,请参考以下文章

如何在 GitHub README.md 中并排显示图像?

css如何让两个容器并排显示

markdown 使用python在jupyter上并排显示表的4种不同方法。

如何让两个不同的元素并排显示?

markdown图片无法显示问题

关于hexo markdown添加的图片在github page中无法显示的问题