如何在Reveal.js中使用两列布局？ [英] How to use two-column layout with reveal.js?

问题描述

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

I use reveal.js and write my slides in Markdown code. Now I want to display my content (text, unordered list of bullet points or even an image) in a classical two-column text layout. I would prefer a solution which may be more complex in initial configuration as long as the actual writing of content in Markdown remains easy.

因为我不喜欢运行本地服务器，我将markdown写入主HTML文件中。

Since I prefer not to run a local server, I write my markdown within the main HTML file.

更新：第一个答案表明应该使用CSS来实现。 （我相应地更新了我的问题。）尽管如此，我仍然找不到如何使用CSS的描述。

Update: As the first answer indicates this should be achieved with CSS. (I updated my question accordingly.) Still, I couldn't find any description how to do it with CSS.

推荐答案

I

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

这篇关于如何在Reveal.js中使用两列布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！