Arbeitsbeispiel für ein schwimmendes Bild in umstrukturiertem Text

Question

Ich suche nach dem besten Weg, um ein Bild zu haben, in dem neben dem Text ein Text in umstrukturiertem Text daneben erscheint. Ich habe mehrere Websites festgestellt, die angeblich zeigen, wie es fertig ist, aber keines zeigt ein tatsächliches funktionierendes Beispiel. Einige zeigen, was scheinbar fehlgeschlagen ist. Ich arbeite tatsächlich mit Sphinx (V0.6.6) und hoffe, die "nativen" CSS zu vermeiden, die mehr als nötig mit sich bringt.

Vielen Dank.

Answer 1

In den Worten von Emily Litella (von SNL), "Vergiss es..." ;-) Und in den Worten von Alex Trebek (von Jepordy!) "Und die Antwort lautet ..."

In dem .rst Datei

.. container:: twocol

   .. container:: leftside

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

   .. container:: rightside

      Bla-bla-blah, and yada-yada.

Im benutzerdefinierten CSS (ich habe eine Kopie von verwendet sphinxdoc.css was ich in ./Source/_static/) eingeleitet habe:

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

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

Jeweils .. container :: wird au003Cdiv> . In meinem Fall wollte ich eine feste Breite für das Bild und eine variable Breite für den Rest. Und mit ein bisschen optimierte Latex, die von Sphinx produziert wurden, leistete es auch eine anständige Aufgabe, für diesen Abschnitt zweispaltige Ausgaben zu produzieren.

Ich hoffe, das ist genug, um jemand anderem herauszufinden, was mir zuerst nicht offensichtlich war.

Answer 2

Arbeiten Sie mit Sphinx v1.1.3 und verwendete die folgende Methode - ein schwebendes linkes Bild und einen Lösungsblock. Es scheint nirgendwo dokumentiert zu werden und es ist ein bisschen hackig, also teilen Sie hier ...

Zuerst das Bild, ausgerichtet nach diesem links RST DOC.

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

Dann können Sie Ihre Absätze auf normale Weise schreiben, sie wickeln das Bild um.

Wenn Sie fertig sind, lassen Sie einen schmutzigen Clearer fallen - ich habe einen 1x1 PNG als Inhalt für den Container verwendet.

.. container:: clearer

    .. image :: _static/spacer.png

Dies erzeugt die folgende HTML, die Sphinxs verwendet div.clearer CSS.

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

Dann können Sie weiter schreiben, wobei Ihr nächster Absatz schön geklärt ist.

Answer 3

Sie können eine Substitution definieren:

.. |clearfloat|  raw:: html

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

Verwenden Sie dann das Align -Attribut für Bilder:

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

Und fügen Sie ein klareres solches ein:

|clearer|

Answer 4

Ich denke, dass ein besseres Ergebnis mit Verwendung erzielt werden könnte Substitutionen.

Hier einen Auszug aus der Dokumentation, der hilfreich sein kann:

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

.. |biohazard| image:: biohazard.png

ich hoffe das hilft