四开版中的两栏布局

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：

# 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 .columnsdiv 创建列布局

---
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 网格系统来解决此类问题。您不需要额外的空列来创建空间，您可以轻松更改列间隙（请参见此处）：

---
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

您还可以使用该命令，如Quarto 文档的图形面板layout-ncol=2中所述：

\n

两栏布局四开（版本 1）

\n

---\ntitle: "Two columns layout Quarto"\nformat: html\nengine: knitr\n---\n\n::: {layout-ncol=2}\n\n\n**First column**\n\n**Second column** \n\nI would like to have text here\n\nand here\n\nSentence becomes longer, it should automatically stay in their column\n\nMore text\n\n:::\n

\n

\n

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

\n

\n

您可以将任何您想要的 Markdown 内容视为图形，方法是将其包含在 Pandoc div 块 \xe2\x80\xa6 中

\n

\n

两栏布局四开（版本 2）

\n

在“自定义布局”标题下，Quarto 文档还解释了一种更通用的方法：您还可以使用该属性创建更复杂的设计，而不是使用layout-ncol或layout_nrow所有列都具有相同的大小layout。在 OP 的示例中，第一列的文本多于第二列，因此我们可以指定列分布为 2:1。

\n

---\ntitle: "Two columns layout Quarto"\nformat: html\nengine: knitr\n---\n\n::: {layout="[[10,5], [40,20], [26,13], [2,1]]"}\n\n\n**First column**\n\n**Second column**\n\nI would like to have text here\n\nand here\n\nSentence becomes longer, it should automatically stay in their column\n\nMore text\n\n:::\n

\n

\n

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

\n