如何在Quarto转HTML中用.column-screen-inset并排多至4-5个代码块？

核心思路 #

利用Quarto的列容器（结合.column-screen-inset占满屏幕宽度）+ 自定义CSS媒体查询，实现不同屏幕尺寸下的自动堆叠效果，和你用knitr::include_graphics实现图片并排的逻辑一致。

步骤1：添加自定义CSS #

在Quarto文档的YAML下方（或单独的.css文件中）加入以下CSS，控制不同断点的列数：

/* 大屏：4-5列并排 */
@media (min-width: 1200px) {
  .multi-code-columns .column {
    width: 20%; /* 5列设20%，4列设25% */
    flex: 0 0 auto;
  }
}

/* 中等屏幕：2列并排 */
@media (min-width: 768px) and (max-width: 1199px) {
  .multi-code-columns .column {
    width: 50%;
    flex: 0 0 auto;
  }
}

/* 小屏：自动堆叠为1列 */
@media (max-width: 767px) {
  .multi-code-columns .column {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* 统一代码块样式，避免高度不一致 */
.multi-code-columns code {
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

步骤2：编写Quarto列容器与代码块 #

用.column-screen-inset和自定义的.multi-code-columns类包裹代码块，示例如下：

::: {.column-screen-inset .multi-code-columns}
::: {.column}
```r
# 代码块1
print("这是第一个代码块")

:::

::: {.column}

# 代码块2
print("这是第二个代码块")

:::

::: {.column}

# 代码块3
echo "这是第三个代码块"

:::

::: {.column}

-- 代码块4
SELECT * FROM table;

:::

::: {.column}

// 代码块5
console.log("这是第五个代码块");

:::
:::

### 关键细节说明
- 调整CSS中`min-width: 1200px`下的`width`值：要5列就设20%，4列设25%，确保总宽度不超过100%。
- 代码块的`max-height`和`overflow-y: auto`是为了避免长代码撑乱布局，可根据需求调整高度。
- `.column-screen-inset`会让列容器忽略Quarto默认的页面边距，充分利用屏幕宽度，符合你的需求。

这样设置后，大屏下4-5个代码块并排，窗口缩小到中等尺寸时自动变成2列，小屏则堆叠为1列，和你实现图片响应式布局的效果一致。

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