You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Quarto能否按列原生定义图片布局?含标签显示问题求助

Quarto实现左列双图+右列单图居中布局(子图标签正常显示)

要实现左列放置image1和image2、右列image3垂直居中对齐的布局,同时保证子图标签(a)(b)(c)正常显示,可以通过嵌套容器+CSS Grid布局来实现,具体代码如下:

::: {#fig-combined layout="grid" style="grid-template-columns: 1fr 1fr; align-items: center; gap: 20px;"}
  <!-- 左列容器:堆叠两张图 -->
  ::: {.column}
    ![Image 1说明](image1.png){#fig-label1}
    ![Image 2说明](image2.png){#fig-label2}
  :::

  <!-- 右列:单独一张图,自动垂直居中 -->
  ![Image 3说明](image3.png){#fig-label3}

<!-- 组图整体标题 -->
整体布局的组图标题
:::

关键细节说明

  • 外层Grid布局:通过layout="grid"和style="grid-template-columns: 1fr 1fr"将容器分为等宽两列,align-items: center确保右列图片相对于左列双图总高度垂直居中。
  • 左列嵌套容器:用.column类包裹两张图,让它们在左列内垂直堆叠,不干扰Grid的列布局逻辑。
  • 子图标签识别:每个子图的#fig-labelXID必须存在,且所有子图都在同一个顶层#fig-combined组容器内,Quarto才能自动生成(a)(b)(c)子图标签。

之前方法的问题分析

  • 方法1的layout="[[0.5,0.5],[1]]"是行优先网格布局,第一行两列各放一张图,第二行整列放第三张图,不符合左列双图的需求。
  • 方法2和3未将左列双图作为整体单元处理,导致Quarto无法正确识别所有子图,仅能解析第一个子图的标签。

内容的提问来源于stack exchange,提问作者reload

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 07:00:59