Quarto 中的两列布局

Question

四开本

我正在

Quarto

创建一个网站，并希望有一个两列布局，这样我就可以很好地并排显示文本。在

streamlit

中，您可以使用

columns

获得两列布局。这是如何布局的示例代码：

---
title: "Two columns layout Quarto"
format: 
  html:
    code-fold: true
engine: knitr
---

I would like to have text here                                               and here

Sentence becomes longer, it should automatically stay in their column        More text

输出：

---

---

正如你所看到的，文本被组合成一个句子，而我想像两栏布局一样将它分开。所以我想知道这在

Quarto

中是否可行？

Streamlit

这是

streamlit

中的一个例子：

# Package
import streamlit as st

# Function with columns
def txt(a, b):
    col1, col2 = st.columns([7,2])
    with col1:
        st.markdown(a)
    with col2: 
        st.markdown(b)

# Example
st.write('# Example in Streamlit')
txt('I would like to have text here', 'and here')

输出：

---

---

如您所见，这很好地显示在两列布局中。

Answer 1

您可以使用 pandoc

.columns

div 创建列布局

---
title: "Two columns layout Quarto"
format: 
  html:
    code-fold: true
engine: knitr
---

:::: {.columns}

::: {.column width="70%"}
I would like to have text here

Sentence becomes longer, it should automatically stay in their column
:::

::: {.column width="10%"}
<!-- empty column to create gap -->
:::

::: {.column width="20%"}
and here

More text
:::

::::

---

---

Answer 2

或者，您可以使用 bootstrap css 网格系统 来解决此类问题。您不需要额外的空列来创建空间，您可以轻松更改列间距（请参阅here）：

---
title: "Two columns layout Quarto"
format: html
engine: knitr
---
  
  
::: {.grid}

::: {.g-col-6}

## First column 
I would like to have text here

Sentence becomes longer, it should automatically stay in their column
:::
  
::: {.g-col-6}

## Second column 

and here

More text

:::
  
:::  

Answer 3

您还可以使用命令

layout-ncol=2

，如 Quarto 文档的 Figure Panels 中所述：

双列布局四开本（版本 1）

::: {layout-ncol=2}


**First column**

**Second column** 

I would like to have text here

and here

Sentence becomes longer, it should automatically stay in their column

More text

:::

每个段落（这里是句子）之间需要有一个空行。这种解释出现在有关图形的章节中，听起来可能很奇怪。但正如它在Figure Divs下所解释的那样：

您可以通过将任何降价内容包含在 Pandoc div 块中来将其视为图形……

双列布局四开本（第 2 版）

在Custom Layouts标题下，Quarto文档还解释了一种更通用的方法：不是使用

layout-ncol

或

layout_nrow

所有列的大小相同，您还可以使用

layout

属性创建更复杂的设计.在 OP 的示例中，第一列的文本比第二列多，因此我们可以指定 2:1 的列分布。

::: {layout="[[10,5], [40,20], [26,13], [2,1]]"}


**First column**

**Second column**

I would like to have text here

and here

Sentence becomes longer, it should automatically stay in their column

More text

:::

请注意，第二个示例中使用的行号/列号是任意的。他们只是提供所需的 2:1 比例。代码翻译为“创建四行，其中第一列的大小始终是第二列的两倍。”