如何在reveal.js中使用两列布局？
如何在reveal.js中使用两列布局？
提问于 2015-06-16 15:56:55
我使用reveal.js并用Markdown代码编写幻灯片。现在，我希望以经典的两列文本布局显示我的内容(文本、无序的项目符号列表甚至图像)。我更喜欢在初始配置中可能更复杂的解决方案，只要在Markdown中实际编写内容仍然容易。
因为我不喜欢运行本地服务器，所以我在主HTML文件中编写我的标记。
更新:正如第一个答案所指出的，这应该通过CSS来实现。(我更新了我的问题。)尽管如此，我还是找不到任何关于如何使用CSS来做这件事的描述。
回答 5
Stack Overflow用户
发布于 2016-07-19 23:28:23
我在外部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和左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>Stack Overflow用户
发布于 2017-11-19 21:55:23
CSS Grid Layout允许非常灵活的布局、两列格式和更复杂的布局。
对于两列，可以使用以下CSS代码段。它定义了两个大小相等的列模板，每个模板的可用宽度为1分(1fr)，两列之间的间距为10px。
.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>Stack Overflow用户
发布于 2016-06-08 19:21:13
我用两个浮动<div>-Elements解决了这个问题：
<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-container中使用标记，就必须将元素包装在p-tags中。如果将data-markdown写入父section-Tag，它将在div中被忽略
希望我能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30861845
复制相关文章
相似问题