如何使用 Asciidoctor 并排放置两个图像？

Question

我正在尝试并排放置两个图像，并且理想情况下将整个块集中在 Asciidoctor 项目中。下面的代码适用于 HTML5 输出，但在渲染为 PDF 时会堆叠图像。

[.clearfix]
--
[.left]
.Title1
image::chapter3/images/foo.png[Foo, 450, scaledwidth="75%"]
[.left]
.Title2
image::chapter3/images/bar.png[Bar, 450, scaledwidth="75%"]
--

是否可以 1) 在 PDF 中渲染并排图像并 2) 将图像块居中？如果可以指定它们之间的空间，那就太好了。

谢谢，

马特

Answer 1

不确定是否可以指定它们之间的空格，但您使用的是块图像而不是内联图像（image::...[]vs image:..[]，注意冒号）。我也不确定 pdf 中的居中是如何工作的，因为我没有做很多 pdf 生成，但如果这些是该行上唯一的东西，它们可能会居中，或者可能会这样做.center？

Answer 2

1) 在 PDF 中渲染并排图像

是的。以下 eskwayrd 对Asciidoctor 的回答：如何并排布局两个代码块？您可以将图像插入只有 2 列的表格中。

[cols="a,a"]
|===
| image::foo.png[]
| image::bar.png[]
|===

在你的情况下，我什至会完全隐藏桌子

[cols="a,a", frame=none, grid=none]
|===
| image::foo.png[]
| image::bar.png[]
|===

2）将图像块居中

目前，这在 PDF 中比较复杂。

我们的块现在是一个表格，因此我们在 HTML 中有一些选项。将内容与<和对齐>非常简单并且有效。

[cols=">a,<a", frame=none, grid=none]
|===
| image::foo.png[]
| image::bar.png[]
|===

将表格宽度设置为自动并将其居中也适用于 HTML：

[%autowidth, cols="a,a", frame=none, grid=none, role="center"]
|===
| image::foo.png[]
| image::bar.png[]
|===

然而，由于某种原因，这两种方法在使用 .pdf 文件进行转换时在 PDF 中不起作用asciidoctor-pdf。PDF 的一种“解决方案”是用左右额外的空列来扩展表格，并尝试用整数调整它们的宽度。

[cols="3,1a,1a,3", frame=none, grid=none]
|===
|
| image::foo.png[]
| image::bar.png[]
|
|===