Question

我正在寻找在reStructured Text中将文字显示在旁边的最佳方式。我发现有几个网站声称它们是如何完成的，但没有一个显示实际功能的例子。有几个显示了看似失败的例子。我实际上和Sphinx合作（v.6.6）并且希望避免歪曲＆＃34;本地人＆＃34;附带的CSS超过必要的。

感谢。

Answer 1

用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 ::变为＆lt; div＆gt;。就我而言，我想要一个固定的图像宽度和一个可变宽度的余数。而且，随着对Sphinx生产的LaTeX的调整，它在为该部分生成双列输出方面也做得不错。

我希望这足以帮助其他人一开始就找出对我来说不明显的事情。

Answer 2

使用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" alt="_images/spacer.png">
</div>

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

Answer 3

您可以定义替换：

.. |clearfloat|  raw:: html

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

然后使用图像的align属性：

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

并插入一个更清晰的信息：

|clearer|

Answer 4

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

这里是文档中可能有用的摘录：

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

.. |biohazard| image:: biohazard.png

我希望这会有所帮助

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

4 个答案: