重組文本中的clearfix段落

我有一個reStructuredText文檔，我有一組圖像和段落來解釋它們。我希望圖像左對齊，文字圍繞它們流動。如果我在html中這樣做，我只需在<img><p></p>對之間插入<div class="clearfix"></div>。在修改案文，我已經得到的東西，看起來像這樣：重組文本中的clearfix段落

.. image:: path/to/image.png 
    :width: 200px 
    :align: left 

very interesting paragraph about path/to/image.png 

.. image:: path/to/another/image.png 
    :width: 200px 
    :align: left 

probably the most interesting paragraph ever about path/to/another/image.png

結果看起來像這張截圖的東西，因爲它沒有clearfix類插圖中的東西：

enter image description here

怎麼辦我在reStructuredText中解決這個問題？有沒有更好的辦法？

來源

2014-05-06 dino

你應該使用默認的sphinx html版本。包裝將根據文字大小和圖像大小發生。

.. image:: path/to/image.png 
    :width: 200px 
    :align: left 

very interesting paragraph about path/to/image.png

將產生以下結果，一個寬度爲200px，另一個寬度爲400px。文字環繞依賴於尺寸。

example

附加選項。如果文本佔用的圖像垂直空間較少，並且您希望包含「clearfix」類，則可以使用raw directive插入自定義html。

.. raw:: html 

    <div class="clearfix"> 

.. image:: path/to/image.png 
    :width: 200px 
    :align: left 

very interesting paragraph about path/to/image.png 

.. raw:: html 

    </div>

來源

2014-05-06 16:29:30 Cole

感謝您對圖像指令的瞭解。這只是SO上的一個錯誤。我相應地更新了我的問題以避免混淆。與此相關的挑戰是，段落文本佔用比圖像更少的垂直空間。任何想法如何解決它在這種情況下？ – dino

增加圖像大小..或者，您可以嘗試其他[獅身人面像主題]（http://sphinx-doc.org/theming.html）。用自定義CSS擴展默認[sphinx模板]（http://sphinx-doc.org/templating.html）。或者您可以使用[.. raw :: html]（http://docutils.sourceforge.net/docs/ref/rst/directive.net/docs/ref/rst/directives.html#raw-data-pass-through），您使用的指令和輸入html直接進入代碼。 – Cole

原始指令正是我正在尋找的;謝謝！我提出了一個編輯你的答案，以納入這一點。 – dino

重組文本中的clearfix段落

回答

相關問題