reStructured Text 中浮动图像的工作示例

Posted 2023-03-06

【中文标题】reStructured Text 中浮动图像的工作示例

【英文标题】：Working example of floating image in reStructured Text

【发布时间】：2011-05-31 19:18:35

【问题描述】：

我正在寻找在 reStructured Text 中让图像旁边出现文本的最佳方式。我发现几个网站声称展示了它是如何完成的，但没有一个展示实际运行的示例。有几个显示了似乎失败的例子。我实际上正在使用 Sphinx (v0.6.6) 并希望避免过度使用它附带的“本机”CSS。

【参考方案1】：

你可以像这样使用图形元素：

.. figure: path/to/image.png
   :figwidth: 100%
   :target: images/navegacion_d.png

而figure元素会使用100%的body而不改变原图的宽度：

+---------------------------+
|        figure             |
|                           |
|<------ figwidth --------->|
|                           |
|  +---------------------+  |
|  |     image           |  |
|  |                     |  |
|  |<--- width --------->|  |
|  +---------------------+  |
|                           |
|The figure's caption should|
|wrap at this width.        |
+---------------------------+

【参考方案2】：

你可以定义一个替换：

.. |clearfloat|  raw:: html

    <div class="clearer"></div>

然后对图像使用 align 属性：

.. image:: _static/my_image.png
   :align: left

并像这样插入一个清晰的：

|clearer|

【讨论】：

1.您首先定义|clearfloat|，然后使用|clearer|。 2.你省略了.clearer的CSS

【参考方案3】：

我认为使用substitutions 可以获得更好的结果。

此处摘录的文档可能会有所帮助：

The |biohazard| symbol must be used on containers used to
dispose of medical waste.

.. |biohazard| image:: biohazard.png

希望对你有帮助

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

我编辑了答案，添加了一个使用替换的示例。感谢您指出这一点

那是完全不同的事情：您正在嵌入一个内嵌的小图像。 （我知道怎么做。）我想要一个更大的两列布局的图像。 （至少，我认为这就是我三年前想要的。）

嗯...您的问题表明“我正在寻找使图像旁边出现在重构文本中的文本的最佳方法”，并且您没有指定尺寸或布局。无论如何，如果您查看我发布的链接，您可以找到很多方法来实现您的目标。使用“image::”指令进行的替换对很多用例都非常有帮助。我想，你没有点击我提供的链接，也许假设报告的小例子是那里唯一的东西？其中一个有用的部分也是：docutils.sourceforge.net/docs/ref/rst/directives.html#image

【参考方案4】：

使用 Sphinx v1.1.3，我一直在使用以下方法 - 浮动左图像和清除块。它似乎没有记录在任何地方，而且有点hacky，所以在这里分享......

首先是图像，按照 rST doc 左对齐。

.. image:: _static/my_image.png
     :align: left

然后你可以用正常的方式写你的段落，它们环绕图像。

完成后，放入一个肮脏的清洁器 - 我使用 1x1 png 作为容器的内容。

.. container:: clearer

    .. image :: _static/spacer.png

这会生成以下 HTML，它使用 Sphinx 的 div.clearer CSS。

<div class="clearer container">
    <img src="_images/spacer.png" >
</div>

然后你就可以继续写作了，你的下一段已经很清楚了。

【讨论】：

你有没有找到一种方法来处理数字？ ***.com/questions/16463051/…

@dmd 不，我没有使用数字 - 但也许类似的技术可能有效？

不，不走运。 :(

有一个稍微不那么老套的解决方案：将替换定义为 raw::html 。这消除了对虚拟图像的需要

“更清晰”的风格并不是每个主题的一部分。它是几个捆绑主题（nonav、agogo、epub、传统和基本）的一部分，但它不是（例如）第三方 RTD 主题的一部分。如果它丢失了，您可能需要将它添加到您的 CSS 中。

【参考方案5】：

用 Emily Litella（来自 SNL）的话来说，“哦......没关系......” ;-) 用 Alex Trebek（来自 Jepordy！）的话来说， “而答案是……”

在 .rst 文件中

.. container:: twocol

   .. container:: leftside

      .. figure:: _static/illustrations/structure.svg

   .. container:: rightside

      Bla-bla-blah, and yada-yada.

在自定义 CSS 中（我使用了 sphinxdoc.css 的副本，并将其放入 ./source/_static/）：

div.leftside 
    width: 414px;
    padding: 0px 3px 0px 0px;
    float: left;


div.rightside 
    margin-left: 425px;

每个 ..container:: 变成一个

。就我而言，我想要图像的固定宽度和其余部分的可变宽度。而且，通过对 Sphinx 生成的 LaTeX 进行了一些调整，它在为该部分生成两列输出方面也做得不错。

我希望这足以帮助其他人弄清楚一开始对我来说不明显的地方。

【讨论】：

非常感谢。我能够使用相同的技术（容器和 CSS）使文本段落像图像一样浮动在文本主体旁边。