Markdown图片并排展示、图注对齐

您所在的位置:网站首页 两端对齐排版图片 Markdown图片并排展示、图注对齐

Markdown图片并排展示、图注对齐

2024-07-01 09:13| 来源: 网络整理| 查看: 265

文章目录 前言方案一:利用Html的标签方案二:利用Html的标签未能实现的思路:使用LaTeX插入图片并控制对齐附:单张图片图注对齐

前言

按Markdown的展示,是可以把图片做到放到同一行的,但是格式却难以控制,因为两张图片会紧密连在一起,即便中间加入空格也难以控制

而我们想要完成的效果就类似下图

在这里插入图片描述

下面提供两种比较贴近这种展示的方案

方案一:利用Html的标签

方案一 \qquad 使用Html的表格标签控制图片并排展示

示例md代码如下:

001.jpg 002.jpg

示例效果如下:

001.jpg 002.jpg

注意点: \qquad ① CSDN-Markdown编辑器对标签的一些样式属性设置不会生效,如border=0无效、frame属性设置无效 \qquad ② CSDN-Markdown编辑器对标签的rules属性效果一致,设置任意合法的值都将隐藏外框线,但内框线无法隐藏(另外,实际上,外框线的隐藏只有在编辑预览效果里能看到,真正到了文章浏览依然不能做到隐藏外框线) \qquad ③ 图片的设置最好大小一致,不然会出现单元格大小不一致的现象(要求原尺寸大小一致,不同尺寸图片通过width属性设置相同大小后,单元格大小分配依然不一致)

优点: \qquad 便于创建图注、并与图片对齐

缺点: \qquad 暂时无法完全隐藏表格框线,无法真正在文章浏览时隐藏任何表格框线

方案二:利用Html的标签

方案二 \qquad 使用Html的标签控制图片并排展示

示例md代码如下:

         001.jpg                            002.jpg

示例效果如下:

         001.jpg                            002.jpg

注意点: \qquad 不要给标签设置align属性,所有图片都设置align属性后,整个标签高度会坍塌,导致后面的内容错位,展示效果很糟糕

优点: \qquad 没有表格那样的框线,看上去效果还行(仅限编辑时的预览)

缺点: \qquad ① 图片尺寸太大会自动换行导致无法并排显示 \qquad ② 图注不便于对齐(光是不同客户端的浏览器展示效果就不一样了,浏览器大小调整后就更是如此) \qquad ③ 中间使用了大量html的空格符,会被选中 \qquad ④ 大概是CSDN更新了吧,编辑时的预览样式和展示时的浏览样式不一致,所以上面的示例中,图片会换行展示(编辑时,标签会被视为内联元素,浏览时,标签会被视为块级元素)

未能实现的思路:使用LaTeX插入图片并控制对齐

众所周知,LaTeX公式可以通过\begin{aligned}     \end{aligned}的方式、在其中使用&来控制对齐

所以理论上,只要Markdown所支持的LaTeX模块可以插入图片,就可以实现很好的图片并排展示、图注对齐

实际上,参考了网上LaTeX的插入图片的方式,发现都需要导入一些包,这并不是Markdown中的LaTeX所支持的,所以无法实现

附:单张图片图注对齐

方案 \qquad 使用Html的标签控制图片与图注对齐

示例md代码如下:

001.jpg

示例效果如下:

001.jpg


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3