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

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

19 голосов
/ 29 декабря 2010

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

Спасибо.

Ответы [ 4 ]

11 голосов
/ 31 декабря 2010

По словам Эмили Лителлы (из SNL), "О ... не бери в голову ..." ;-) И по словам Алекса Требека (из 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;
}

Каждый ..контейнер :: становится

. В моем случае я хотел иметь фиксированную ширину для изображения и переменную ширину для оставшейся части. И с небольшим изменением LaTeX, произведенным Sphinx, он также проделал достойную работу по созданию двухколоночного вывода для этого раздела.

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

7 голосов
/ 20 октября 2012

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

Сначала изображение, выровненное по левому краю в соответствии с этим rST doc . 

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

Тогда вы можете написать свои абзацы обычным способом, они обернуты вокруг изображения.

Когда вы закончите, добавьте грязный очиститель - я использовал 1x1 png в качестве содержимого для контейнера. 

.. container:: clearer

    .. image :: _static/spacer.png

Это генерирует следующий HTML, который использует Sphinx's div.clearer CSS. 

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

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

3 голосов
/ 01 сентября 2015

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

.. |clearfloat|  raw:: html

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

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

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

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

|clearer|
1 голос
/ 04 октября 2013

Я думаю, что лучшего результата можно достичь, используя замен .

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

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

.. |biohazard| image:: biohazard.png

Надеюсь, это поможет

...