css - reStructured Text でのフローティング画像の実例

Question

reStructured Text の横にテキストが表示された画像を表示する最良の方法を探しています。それがどのように行われたかを示すと称するサイトをいくつか見つけましたが、実際に機能する例を示しているサイトはありません。いくつかは、失敗例と思われるものを示しています。私は実際に Sphinx (v0.6.6) を使用しており、付属の「ネイティブ」CSS を必要以上に改変しないようにしたいと考えています。

Answer 1

（SNLの）エミリー・リテラの言葉では、「ああ...気にしないでください...」 ;-)そして（ジェポルディの）アレックス・トレベックの言葉では、「そして答えは...」

.rstファイル内

.. container:: twocol

   .. container:: leftside

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

   .. container:: rightside

      Bla-bla-blah, and yada-yada.

カスタムCSSで（./source/_static/に入れたsphinxdoc.cssのコピーを使用しました）：

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

div.rightside {
    margin-left: 425px;
}

各..container::は<div>になります。私の場合、画像には固定幅、残りの画像には可変幅が必要でした。そして、Sphinxによって生成されたLaTeXを少し調整するだけで、そのセクションの2列の出力を生成するというまともな仕事もしました。

最初は私にはわからなかったことを誰かが理解するのに十分だと思います。

Answer 2

Sphinx v1.1.3 を使用して、次の方法を使用してきました - フローティング左画像とクリア ブロックです。どこにも文書化されていないようで、少しハックなので、ここで共有します...

最初の画像は、このrST docに従って左に配置されます。

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

次に、通常の方法で段落を書くことができます。段落は画像を囲みます。

完了したら、汚れたクリアラーをドロップします。コンテナーのコンテンツとして 1x1 の png を使用しました。

.. container:: clearer

    .. image :: _static/spacer.png

これにより、Sphinx のdiv.clearerCSS を使用する次の HTML が生成されます。

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

次に、次の段落をきれいにクリアして、書き続けることができます。

Answer 3

置換を使用すると、より良い結果が得られると思います。

役立つドキュメントからの抜粋を次に示します。

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

.. |biohazard| image:: biohazard.png

これが役立つことを願っています

Answer 4

置換を定義できます。

.. |clearfloat|  raw:: html

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

次に、画像に align 属性を使用します。

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

そして、次のようにクリアを挿入します。

|clearer|