四开版中的两栏布局

2024-03-21

Quarto

我正在创建一个网站Quarto并希望有一个两列布局,这样我就可以很好地并排显示文本。在streamlit https://streamlit.io您可以使用columns https://docs.streamlit.io/library/api-reference/layout/st.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

Output:



正如您所看到的,文本被组合成一个句子,而我希望将其分开,就像两列布局一样。所以我想知道这是否可能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')

Output:



正如您所看到的,这在两列布局中很好地显示了。


你可以使用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
:::

::::



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

四开版中的两栏布局 的相关文章

  • 将边权重传递给networkx中的graphviz_layout

    每个人都找不到如何将权重列表的属性名称传递给networkx中的graphviz layout 像这样的事情 nx spring layout G weight weight sum 但与nx graphviz layout G 也许有人会
  • 如何使ListView的宽度适合其单元格的宽度

    我有一个带有自定义单元工厂的 ListView 我计算单元格的最大值 minWidth 并将其设置为整个 ListView 的 minWidth 因此 受布局中其他区域约束的 ListView 会精确地缩小到 minWidth 但它所容纳的
  • 将简单的单色绘图图像转换为二维文本数组

    我正在尝试开发一种算法 将简单的单线图像 即迷宫 转换为文本二维数组 例如 下面的图像 它将被转换为以下文本数组
  • 如何在杂志/报纸等砖石布局中浮动元素?

    我正在尝试实现一种布局 其中项目将像报纸 杂志文章部分一样浮动 它类似于什么jQuery 的砌体 http masonry desandro com 做 但我试图仅使用 CSS3 来实现这一点 我想也许box显示属性可以做到这一点 尽管尝试
  • 当 max-height 固定时 CSS 自动列计数

    我希望实现一个布局 其中一个元素 在我的例子中是一个 ul 当高度达到一定限制时扩展到 2 或更多 列 例如 如果高度仅够容纳 3 个项目 而我有 5 个项目 则第 4 和第 5 个项目将转到第二列 该列仅在需要时创建 我尝试通过设置来做到
  • 将文本环绕在 div 两侧

    这是我试图实现的目标 与以下HTML div p some text p div Awesome content div div 有这个 text text text text text text text text text text t
  • jquery脉动文本

    我正在使用 jquery 来使文本脉动 一切都很好 但我无法理解某些事情 我只想脉动 x 次 然后停止 我正在使用以下代码来使类产生脉动 document ready function function pulsate pulsate an
  • 如何仅将列表中每个字符串的标题大写?

    整个问题 编写一个函数 该函数将字符串列表作为参数 并返回一个包含每个大写字符串作为标题的列表 也就是说 如果输入参数是 apple pie brownies chocolate dulce de leche eclairs 你的函数应该返
  • 旋转时键盘隐藏

    我正在开发 iPad 应用程序 在其中一个视图中 我有一个子视图 它在按钮点击事件时出现和消失 子视图包含一个UITextView 默认情况下 我将其设置为第一响应者 以便在视图出现时键盘立即出现 子视图也会消失UIKeyboardWill
  • 如何将 CSS 样式应用于四开输出

    我想将样式应用于四开块输出 我做的第一件事就是在类中嵌入一些 CSS 属性 output在四开文档中 然后使用以下内容引用它 r class output output 它有效 但我认为它不是很有效 因为我必须在每个文档中编写它 所以我写了
  • 动态更改 ListView 的行布局

    我正在一个应用程序中开发一个聊天模块 我希望来自两个参与者的消息以相反的对齐方式 其他用户左对齐 我自己的消息右对齐 现在 我的行布局是通过静态布局 xml 传入的 消息和头像左对齐 有没有办法动态修改视图 或者有没有办法传递替代行布局供
  • 如何防止 HTML 文本孤儿?

    我经常在图像周围包裹文字 有时文字包裹起来很笨拙 如下所示 在 HTML 中 图像向左浮动 文本如下 p img src images image p p This is my David Copperfield em I was born
  • 读取一个文本文件,替换其中的单词,输出到另一个文本文件

    所以我试图在 GO 中编写一个程序来获取一个充满代码的文本文件并将其转换为 GO 代码 然后将该文件保存到 GO 文件或文本文件中 我一直在试图弄清楚如何保存对文本文件所做的更改 但我可以看到更改的唯一方法是通过 println 语句 因为
  • SQLAlchemy - 将文本查询与过滤器结合起来

    我在用着SA 0 6 6 Python 2 66 and Postgres 8 3 我有某些查询需要一些复杂的安全检查 可以使用WITH RECURSIVE询问 我想做的是将文本查询与查询对象结合起来 这样我就可以根据需要应用过滤器 我最初
  • BlackBerry - 带居中位图的 ButtonField

    我有一个从 ButtonField 扩展的类 class BitmapButtonField extends ButtonField private Bitmap bitmap private int buttonWidth private
  • 如何在 UNIX / Linux 操作系统下使用 sed 替换带有换行符 (\n) 的模式?

    我有一个 txt 文件 其中包含 Some random text here This file has multiple lines Should be one line I use sed q N s n sl g t q file1
  • 如何突出显示最靠近鼠标的文本行?

    我有一篇很长的文本 我想为用户提供阅读帮助 当前行应该突出显示 为了更简单 我将只使用鼠标的 Y 坐标 这样 鼠标指针就不会妨碍 我有一个带有 id 的大 DIVcontent它用类填充整个宽度和一个小 DIVcontent对于文本 请参阅
  • 在 google Vision OCR 中被识别为单个单词的特殊字符?

    我试图让谷歌视觉 OCR 正则表达式可搜索 我已经完成了它 并且当文档仅包含英文字符时效果很好 但当有其他语言的文本时 它就会失败 发生这种情况是因为我在谷歌视觉单词组件中只有英文字符 如下所示 VISION API WORD COUNTE
  • 用 C# 在图像上写入文本

    我有以下问题 我想在位图图像中制作一些图形 例如债券形式 我可以在图像中写入文字但我会在不同的位置写更多的文字 Bitmap a new Bitmap path picture bmp using Graphics g Graphics F
  • CSS - 将文本保留在图像下方

    我正在尝试创建一个简单的图片库 有人告诉我使用 float left 但是当我这样做时 页脚中的所有文本都会射到第一张图像 我已经搜索了大约一个小时试图找到解决方案 但我找不到任何东西 我尝试过使用边距 边框 不同的对齐方式和各种不同的小东

随机推荐