Quarto 中的两列布局答案

【问题标题】：Two columns layout in QuartoQuarto 中的两列布局
【发布时间】：2022-10-25 04:11:53
【问题描述】：

四开

我正在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')

输出：

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

【问题讨论】：

标签： text layout multiple-columns quarto

【解决方案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
:::

::::

【讨论】：