Я ищу лучший способ иметь изображение с текстом, появляющимся рядом с ним в reStructured Text. Я нашел несколько сайтов, чтобы показать, как это делается, но ни один из них не показывает пример фактического функционирования. Некоторые показывают, что, по-видимому, являются неудачными примерами. Я действительно работаю с Sphinx (v0.6.6) и надеюсь избежать извращения "родного" CSS, который поставляется с ним более чем необходимо.
Спасибо.
По словам Эмили Лителла (из 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, он также сделал достойную работу по выпуску двух столбцов для этого раздела.
Я надеюсь, что этого достаточно, чтобы помочь кому-то еще понять, что не было очевидно для меня вначале.
Работа с 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>
Затем вы можете продолжить запись, при этом ваш следующий абзац будет очищен.
Я думаю, что лучший результат может быть достигнут с помощью подстановок.
Вот выдержка из документации, которая может быть полезна:
The |biohazard| symbol must be used on containers used to
dispose of medical waste.
.. |biohazard| image:: biohazard.png
Я надеюсь, что это поможет
Вы можете определить замену:
.. |clearfloat| raw:: html
<div class="clearer"></div>
Затем используйте атрибут align для изображений:
.. image:: _static/my_image.png
:align: left
И вставьте более четкое изображение:
|clearer|