如何用Sphinx生成的reStructuredText实现PDF与HTML中图片并排

解决csv-table边框问题的替代方案 #

csv-table自带的边框无法隐藏，推荐以下两种适配PDF和HTML的方案：

方案1：使用grid-table（无边框配置） #

grid-table支持自定义边框样式，可实现无边框的图片并排，同时兼容PDF和HTML渲染：

.. grid-table::
    :widths: 50 50
    :frame: none
    :grid: none

    * - .. figure:: ../_static/1.png
          :width: 75mm
          :height: 75mm
          :align: center
      - .. figure:: ../_static/2.png
          :width: 75mm
          :height: 75mm
          :align: center

• 关键配置：:frame: none和:grid: none移除所有边框；:widths: 50 50让两张图片各占一半宽度；:align: center确保图片在单元格内居中，避免偏移。

方案2：结合raw HTML与CSS（HTML优化+PDF兼容） #

如果需要更灵活的布局控制，可通过自定义CSS实现HTML端的灵活并排，同时保证PDF端正常渲染：

1. 在项目conf.py中引入自定义CSS：

html_css_files = [
    'css/custom.css',
]

2. 在_static/css/custom.css中添加flex布局样式：

.image-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.image-row figure {
    flex: 1;
    margin: 0;
}

3. reStructuredText代码：

.. raw:: html

    <div class="image-row">

.. figure:: ../_static/1.png
    :width: 75mm
    :height: 75mm

.. figure:: ../_static/2.png
    :width: 75mm
    :height: 75mm

.. raw:: html

    </div>

• 说明：HTML端会通过flex布局实现图片并排，PDF渲染时会忽略raw块，自动将两张图片按上下排列（若需PDF也并排，优先选方案1）。

内容的提问来源于stack exchange，提问作者Ailsa90