reveal.js 中具有组织模式的列

Question

当我通过 org-reveal 导出时，如何在 org-mode 中创建列？

我找到了这个 link RevealJS with Bootstrap Columns。这似乎可行，但是在使用 org 模式时我该怎么做呢？ *** 已为文档结构保留。

Answer 1

我可以找到一种可能的解决方案。可能不是最优雅的。

可以使用 bootstrap 列创建列。因此，作为额外的 css，应该加载 bootstrap.css。

在 org 文件头中：

#+REVEAL_EXTRA_CSS: bootstrap.css

并在org文件中的特定位置：

#+REVEAL_HTML: <div class='span6'>
...
#+REVEAL_HTML: </div>

#+REVEAL_HTML: <div class='span6'>
...
#+REVEAL_HTML: </div>

有没有更优雅的方法来做到这一点？

Answer 2

我在 this 演示文稿中找到了解决方案，其中使用了列 class。

为了将它与 org-reveal 一起使用，我执行了以下操作：

#+REVEAL_HTML: <div class="column" style="float:left; width: 50%">
Column 1
#+REVEAL_HTML: </div>

#+REVEAL_HTML: <div class="column" style="float:right; width: 50%">
Column 2
#+REVEAL_HTML: </div>

Answer 3

下面的另一个解决方案使用 Flexbox 和 3 列。

最小组织文件：

#+REVEAL_ROOT: https://cdn.jsdelivr.net/npm/reveal.js
#+REVEAL_EXTRA_CSS: ./local.css

* Section
** Slide

#+REVEAL_HTML: <div id="box-container">
#+REVEAL_HTML: <div id="box-1">
Box 1
#+REVEAL_HTML: </div>

#+REVEAL_HTML: <div id="box-2">
Box 2
#+REVEAL_HTML: </div>

#+REVEAL_HTML: <div id="box-3">
Box 3
#+REVEAL_HTML: </div>

#+REVEAL_HTML: </div>

示例 CSS 文件 local.css 与 Org 文件放在同一文件夹中：

#box-container {
  display: flex;
}

#box-1 {
  background-color: dodgerblue;
  width: 33%;
}

#box-2 {
  background-color: orangered;
  width: 33%;
}

#box-3 {
  background-color: green;
  width: 33%;
}

生成以下 3 列幻灯片：

reveal.js 中具有组织模式的列

columns in reveal.js with org-mode

org-mode

reveal.js