：对齐：没有文字换行的图像

Question

如何对齐图像但不让文本环绕图像？一种方法是删除

.figure.align-left {float: left;}

来自CSS，但这可能会破坏其他东西 - RST中的任何更干净的东西（我知道

.. raw::html

）？示例案例，在 Firefox 中包装：

Don't wrap me
-------------

.. figure:: img.png
  :align: left
  :width: 500px

or me

Answer 1

Sphinx 有一个特殊指令

class

，它将 CSS 类属性分配给下一个元素。有关其工作原理的详细信息，请参阅 class 的 docutils 文档。

但是在 Sphinx 中，当默认域包含

class

指令时，该指令将被隐藏。因此，Sphinx 将其重新导出为

rst-class

（参见注释）。因此，您必须在 Python 中使用它，因为它的语言使用

class

。

以下重构文本标记：

.. rst-class:: image-no-text-wrap

.. figure:: img.png
    :align: left
    :width: 500px

这将产生类似以下 HTML 的内容：

<figure class="image-no-text-wrap align-left">
<a class="reference internal image-reference" href="_images/img.png"><img alt="_images/img.png" src="_images/img.png" style="width: 500px;"></a>
</figure>

最后定义 CSS 选择器，但您认为最好可以防止文本换行，例如：

figure.image-no-text-wrap {
  overflow: hidden;
  white-space: nowrap;
}

Answer 2

figure 指令提供了两个选项来指定类值。当 :class: 传递到包含的 <image>

 时，:figclass: 传递到 

<figure>

 元素：

.. figure:: img.png
    :align: left
    :class: image-class-value
    :figclass: figure-class-value