Quarto中的两列布局

Question

Quarto

我正在创建一个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 .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
:::

::::

​

​