Рабочий пример плавающего изображения в реструктурированном тексте

Я ищу лучший способ иметь изображение с текстом, появляющимся рядом с ним в reStructured Text. Я нашел несколько сайтов, чтобы показать, как это делается, но ни один из них не показывает пример фактического функционирования. Некоторые показывают, что, по-видимому, являются неудачными примерами. Я действительно работаю с Sphinx (v0.6.6) и надеюсь избежать извращения "родного" CSS, который поставляется с ним более чем необходимо.

Спасибо.

Ответы

Ответ 1

По словам Эмили Лителла (из SNL): "Ох... Не обращай внимания...";-) И в словах Алекса Требека (из Джепарди!) "И ответ..."

В файле .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;
}

Каждый..контейнер:: становится a <div> . В моем случае я хотел иметь фиксированную ширину для изображения и переменную ширину для остатка. Кроме того, с небольшим усовершенствованием LaTeX, выпущенным Sphinx, он также сделал достойную работу по выпуску двух столбцов для этого раздела.

Я надеюсь, что этого достаточно, чтобы помочь кому-то еще понять, что не было очевидно для меня вначале.

Ответ 2

Работа с Sphinx v1.1.3, я использовал следующий метод: плавающее левое изображение и блок очистки. Кажется, он нигде не документирован, и он немного взломан, поэтому поделитесь здесь...

Сначала изображение, выровненное слева в соответствии с этим 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>

Затем вы можете продолжить запись, при этом ваш следующий абзац будет очищен.

Ответ 3

Я думаю, что лучший результат может быть достигнут с помощью подстановок.

Вот выдержка из документации, которая может быть полезна:

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

.. |biohazard| image:: biohazard.png

Я надеюсь, что это поможет

Ответ 4

Вы можете определить замену:

.. |clearfloat|  raw:: html

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

Затем используйте атрибут align для изображений:

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

И вставьте более четкое изображение:

|clearer|