markdown 图片并排显示

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kQt9bJdt-1622809279619)(图片链接)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNfNJn5L-1622809279621)(图片链接)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eh0PSx9p-1622809279622)(图片链接)]
 
 

    实例:
    开始显示标签第2个显示的卡片第3个显示的卡片
    错误的写法:换行

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-slerLfAh-1622809279644)(图片链接)]
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SZjEgkcR-1622809279646)(图片链接)]
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gDrAtLYr-1622809279649)(图片链接)]
     
     

      实例:
      开始显示标签
      第2个显示的卡片
      第3个显示的卡片

      居中并排:

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

      <center class="half">
          <img src="图片链接" width="200"/><img src="图片链接" width="200"/><img src="图片链接" width="200"/>
      </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>
         
         

          显示结果:



          左对齐并排:

          还是注意所有的<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>
           
           

            显示效果:




            参考博客: (https://blog.csdn.net/WMN7Q/article/details/73138326

            更多参考:

            https://blog.csdn.net/qq_32963855/article/details/106884124
            https://blog.csdn.net/qq_21808961/article/details/80666589
            https://sobaigu.com/images-side-by-side-in-markdown.html
            https://www.jianshu.com/p/27617b15d6e8
            https://www.cnblogs.com/jaycethanks/p/12201959.html

            • 1
              点赞
            • 1
              收藏
              觉得还不错? 一键收藏
            • 0
              评论

            “相关推荐”对你有帮助么?

            • 非常没帮助
            • 没帮助
            • 一般
            • 有帮助
            • 非常有帮助
            提交
            评论
            添加红包

            请填写红包祝福语或标题

            红包个数最小为10个

            红包金额最低5元

            当前余额3.43前往充值 >
            需支付:10.00
            成就一亿技术人!
            领取后你会自动成为博主和红包主的粉丝 规则
            hope_wisdom
            发出的红包
            实付
            使用余额支付
            点击重新获取
            扫码支付
            钱包余额 0

            抵扣说明:

            1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
            2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

            余额充值