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

Question

我正在寻找最好的方法来在reStructured Text中显示带有文本的图像.我发现有几个网站声称它们是如何完成的,但没有一个显示实际的功能示例.有几个显示了看似失败的例子.我实际上正在使用Sphinx(v0.6.6)并希望避免变态它所带来的"原生"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 ::变成<div>.就我而言,我想要一个固定的图像宽度和一个可变宽度的余数.而且,随着对Sphinx生产的LaTeX的调整,它在为该部分生成双列输出方面也做得不错.

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

Answer 2

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

首先是图像,按照此rST文档向左对齐.

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

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

当你完成后,放入一个肮脏的清洁工 - 我已经使用1x1 png作为容器的内容.

.. container:: clearer

    .. image :: _static/spacer.png

这会生成以下HTML,它使用Sphinx的div.clearerCSS.

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

然后你可以继续写作,你的下一段很好地清除.