如何在reveal.js中使用两列布局？

Question

我使用reveal.js并用Markdown代码编写幻灯片。现在我想以经典的两列文字布局显示我的内容(文本、无序列表或甚至图片)。我希望有一种解决方案，即使初始配置更复杂，Markdown实际编写仍然很容易。

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

更新：正如第一个答案所指出的那样，这应该通过CSS来实现。(我已经相应更新了我的问题。) 然而，我找不到任何关于如何用CSS做到这一点的描述。

- jans

---

关于“如何使用CSS实现”的实际操作（文件存储位置，如何调用它），请参见https://stanford.edu/~vbauer/teaching/revealjs.html。 - Geraldine

@Geraldine 的链接已失效。 - wlnirvana

@wlnirvana 我明白了 - 我一直没有找到替代方案 :( - Geraldine

Answer 1

我正在使用 CSS 弹性布局，它运作良好。

<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>

- TheRimalaya

---

我认为这是最好、最简单的答案，为什么会有人使用display: table超出了我的理解。 - Patrick Hund

关于这个方法的说明，如果要在Markdown中使用它，您需要使用以下代码：<section class="hbox">
<div class="container"> <div class="flex-col" data-markdown>

• 第一列内容 </div> <div class="flex-col" data-markdown>
• 第二列内容 </div> </div> </section>

- Rod Burns

@Dieshe 你可能需要在 <div> 标签之间添加空行，以便 MD 解析器正常工作（这在很大程度上取决于实现方式）。 - Fuhrmanator

你能解释一下为什么使用网格布局解决方案时，不需要使用 .col 类吗？在我的情况下，无论内部 div 的类名是什么，它都可以工作。但我必须给它一个名称。 - Ger

@Ger 内部栏杆式 div 需要一个名称，这是规范要求的："栏杆式 div 可以嵌套。开放栏杆式 div 之所以与其他区分开来，是因为它们必须具有属性。"。 - Joël

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为right和left的div元素，以产生双列布局。

我在我的Markdown文档中放置了ID为right和left的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>

- J. Carew

---

这对我来说不起作用，可能是因为我将我的 Markdown 写入主 HTML 文件中，而不是使用单独的 Markdown 文件。 - jans

@jans 请查看下方 @DiegoP 的回答。同时请注意您可以将整个 markdown 列放在一个 <p> 元素中。 - andrew

我的唯一建议是使用类而不是ID。每个ID只能使用一次，我想你可能想多次使用“#left”和“#right”元素。 - Daniel Apt

对我来说，这会破坏打印/ PDF 输出，可能是因为浮点数的原因。我更喜欢下面Frank的解决方案。 - Steve Powell

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，它有许多合法的用途，通常是最简单的解决方案，并且广泛兼容。

- Frank N

---

如果列中的文本太短，则无法正确呈现。 - Ratbert

Answer 4

CSS Grid Layout 可以实现非常灵活的布局，包括两列格式和更复杂的布局。

要实现两列格式，可以使用以下 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>

- FrankSchulz

---

虽然我非常喜欢CSS网格，但它在CSS网格中无法正常工作。 - Martin Thoma

对于我来说，在reveal.js中使用CSS网格方法可行。也许您可以分享一下您遇到的问题？ - FrankSchulz

适用于我。 - isapir

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>

我发现如果你想在

容器内使用markdown，你需要用

标签包裹元素。如果你将data-markdown写入父级

标签中，在

内它将被忽略。

希望这能帮到你！

- DiegoP

Answer 6

我发现了一种方法，可以将一个元素展示为列布局的形式。

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

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

但实际上，它无法处理右侧有多个元素的情况。

- Pasquale Muscettola

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>

它对我有效

- Hossein Vatani