关于排列
如果把要显示的内容看成一个集合,那么每一个内容都可以看成一个盒子,盒子与盒子的关系只可能有三种:
-
上下关系(按列排),也就是一个内容在上,一个内容在下
-
左右关系(按行排),也就是一个在左,一个在右,如果排满了一行,就接着排下一行
-
包含关系(一个是容器,另一个是容器里面的一个元素):例如,相框套照片
上述逻辑,对于熟悉 HTML 的小伙伴,并不是什么新概念,就是 Block元素 和 inline元素,即块元素和行内元素。
图片为什么要按行排?
大多数情况下,我们使用图片,都是上下排,也就是将它看作是块元素(Block element),比如示意图或者插图。 但有的时候,当图片一句话的一部分时,将图片看作一句话中的一个字,效果更好。
比如,您在写用户使用手册,有这么一句话:
按退出按钮,可以退出系统。
上面的 退出 两字,如果直接显示为一个系统操作界面上的退出按钮图片,效果是最好的,此时,我们需要图片是按行排的。
图片案列或者按行排的语法
以下是插入图片的语法:
//一般插入图片,用两个冒号
//图片标题可为空
//图片的宽高可空
image::图片的路径[图片的标题,图片的宽,图片的高]
//插入行内图片,用一个冒号
//图片标题可为空
//图片的宽高可空
image:图片的路径[图片的标题,图片的宽,图片的高]
示例
下面输入asciidoc内容
按 image:2024-05-13T06-26-21-495Z.png[] 可退出系统。
NOTE | 如果您和笔者一样,是在 vscode+asciidoc插件环境下撰写asciidoc文档的话,在输入上述内容到需要插入图片时,直接按 Ctrl + Alt + V 即可,因为恰好在一行文本的中部,插件会自动按行插入图片,非常方便。相应地,如果你在一个空行上,按 Ctrl + Alt + V 的话,插件会自动按列插入图片,非常方便。 |
得到的结果如下:
嗯,效果不错,就是图片太大了,我们通过调整宽高设置以下,代码修改如下:
按 image:2024-05-13T06-26-21-495Z.png[30,30] 可退出系统。
在上面代码的 [30,30] 部分,我们指定了图片的宽高,这样图片就和行文字匹配了。注意asciidoc会自动保持图片长宽比显示。
得到的结果如下:
这就是行内图文混排。
欢迎继续关注本系列。