如何通过reveal.js使用两列布局？

Question

我使用 Reveal.js 并用 Markdown 代码编写幻灯片。现在我想以经典的两列文本布局显示我的内容（文本、无序列表的项目符号列表甚至图像）。我更喜欢一个在初始配置中可能更复杂的解决方案，只要在 Markdown 中实际编写内容仍然很容易。

由于我不喜欢运行本地服务器，因此我在主 HTML 文件中编写 Markdown。

更新：正如第一个答案所示，这应该通过 CSS 来实现。 （我相应地更新了我的问题。）不过，我找不到任何描述如何使用 CSS 来做到这一点。

Answer 1

我正在使用CSS flex，它工作正常。

<style>
.container{
    display: flex;
}
.col{
    flex: 1;
}
</style>

<div class="container">

<div class="col">
Column 1 Content
</div>

<div class="col">
Column 2 Content
</div>

</div>

更新：

由于 pandoc 支持围栏 div，

::: {.container}
:::: {.col}
Column 1 Content
::::
:::: {.col}
Column 2 Content
::::
:::

对于样式，我们可以使用

flex

或

grid

，两者都可以正常工作。

使用

flex

<style>
.container{
  display: flex;
}
.col {
  flex: 1;
}
</style>

使用

grid

<style>
.container{
  display: grid;
  grid-auto-flow: column;
}
</style>

Answer 2

我在外部 css 文件 custom.css 中创建了两个 ID，并将其附加到我的 Reveal.js 文件中，其中包含 YAML 标头中的 css: custom.css 字段。

#left {
  left:-8.33%;
  text-align: left;
  float: left;
  width:50%;
  z-index:-10;
}

#right {
  left:31.25%;
  top: 75px;
  float: right;
  text-align: right;
  z-index:-10;
  width:50%;
}

我在 Markdown 文档中放置了具有左右 ID 的 div 元素，以生成两列布局。

<div id="right">

- You can place two graphs on a slide
- Or two columns of text
- These are all created with div elements

</div>

Answer 3

.multiCol {
    display: table;
    table-layout: fixed; // don't fudge depending on content
    width: 100%;
    text-align: left; // matter of taste, makes imho sense
    .col {
        display: table-cell;
        vertical-align: top;
        width: 50%;
        padding: 2% 0 2% 3%; // some vertical, and between columns
        &:first-of-type { padding-left: 0; } // there's nothing before col1
    }
}

将其放入您的自定义主题中，即之前

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

如何使用？ - 简单的！并且不限于2列：

<section>
    <h3>Doing two-column (this headline still full-width)</h3>

    <div class='multiCol'>
        <div class='col'>
            Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
        </div>
        <div class='col'>
            Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
        </div>
    </div>
    And simply more regular full-width text in the following. But hey, there is also:
    <div class='multiCol'>
        <div class='col'>Also works for 3 columns...</div>
        <div class='col'>...as we can show in...</div>
        <div class='col'>...this example here.</div>
    </div>
</section>

• 无需漂浮
• 无需清除修复
• 与大小无关（→ 仅使用百分比）
• 2 列、3 列、4 列...

<table>

通常被认为是“过时的”（因为在早期的 html 时代，它被严重滥用于布局目的，并且今天仍然用于电子邮件中的 html...），但相反，至少作为一个属性

layout:table

它具有许多合法用途，通常是最简单的解决方案并且广泛兼容。

Answer 4

CSS 网格布局允许非常灵活的布局、两列格式和更复杂的布局。

对于两列，可以使用以下 CSS 片段。它定义了两个大小相等的列模板，每个模板是可用宽度的 1 分数 (

1fr

)，列之间的装订线空间为 10 像素。

.twocolumn {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 10px;
   text-align: left;
}

可以如下使用

<section>
  <h2>Slide Title</h2>
  <div class="twocolumn">
    <div>
      Column One
    </div>
    <div>
      Column Two        
    </div>
  </div>
</section>

Answer 5

我用两个浮动的

<div>

-元素解决了这个问题：

<section>
  <div style="text-align: left; float: left;">
    <p data-markdown>- This is my first left element</p>
    <p data-markdown>- This is my second left element</p>
    <!-- more Elements -->
  </div>

  <div style="text-align: right; float: right;">
    <p data-markdown>- This is my first right element</p>
    <p data-markdown>- This is my second rightelement</p>
    <!-- more Elements -->
  </div>
</section>

我发现，如果你想在

div

容器内使用降价，你必须将元素包装在

p

标签中。如果您将

data-markdown

写入父级

section

-标签中，它将在

div

内被忽略

希望能帮到你！

Answer 6

我找到了以下方法来显示一个元素，使其看起来像是在列布局中

Text going to the right <!-- .element: style="float: right; width: 40%" -->

Text going on the left column <!-- .element: style="width: 40%" -->

但实际上它不适用于右侧多个元素

Answer 7

我无法完全理解你的意思，但我想你可能会在ramnathv帖子中找到答案。

---
layout: slide
---
{{{ content }}}
<div class='left' style='float:left;width:{{left.width}}'>
 {{{ left.html }}}
</div>
<div class='right' style='float:right;width:{{right.width}}'>
 {{{ right.html }}}
</div>

它对我有用

Answer 8

这对我有用（也允许超过 2 列！）：

---

## Multi-column slides

This defies the use of markdown, but if you really want it you can use some HTML and CSS magic:

<div class="multicolumn">
<div>

-   Bullet
    -   Bullet
-   Bullet
-   Bullet

</div>

<div>

1. List
    1. List
2. List
3. List

</div>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...

</div>

<div>

![](./img/hello.webp)

</div>

</div>

Pretty neat, huh!

---

.multicolumn {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 1em;
}

.multicolumn div {
    margin: 0.5em;
    flex: 1;
}