Markdown图片并排展示、图注对齐 |
您所在的位置:网站首页 › 两端对齐排版图片 › Markdown图片并排展示、图注对齐 |
文章目录
前言方案一:利用Html的标签方案二:利用Html的标签未能实现的思路:使用LaTeX插入图片并控制对齐附:单张图片图注对齐
前言
按Markdown的展示,是可以把图片做到放到同一行的,但是格式却难以控制,因为两张图片会紧密连在一起,即便中间加入空格也难以控制 而我们想要完成的效果就类似下图 下面提供两种比较贴近这种展示的方案 方案一:利用Html的标签方案一 \qquad 使用Html的表格标签控制图片并排展示 示例md代码如下: 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示例效果如下: ![]() ![]() 注意点:
\qquad
不要给 优点: \qquad 没有表格那样的框线,看上去效果还行(仅限编辑时的预览) 缺点:
\qquad
① 图片尺寸太大会自动换行导致无法并排显示
\qquad
② 图注不便于对齐(光是不同客户端的浏览器展示效果就不一样了,浏览器大小调整后就更是如此)
\qquad
③ 中间使用了大量html的空格符,会被选中
\qquad
④ 大概是CSDN更新了吧,编辑时的预览样式和展示时的浏览样式不一致,所以上面的示例中,图片会换行展示(编辑时, 众所周知,LaTeX公式可以通过\begin{aligned} \end{aligned}的方式、在其中使用&来控制对齐 所以理论上,只要Markdown所支持的LaTeX模块可以插入图片,就可以实现很好的图片并排展示、图注对齐 实际上,参考了网上LaTeX的插入图片的方式,发现都需要导入一些包,这并不是Markdown中的LaTeX所支持的,所以无法实现 附:单张图片图注对齐方案 \qquad 使用Html的标签控制图片与图注对齐 示例md代码如下: 001.jpg示例效果如下: ![]() |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |