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

r6vfmomb  于 2023-10-21  发布在  其他
关注(0)|答案(7)|浏览(122)

我使用reveal.js,用Markdown代码编写幻灯片。现在,我想在经典的两栏文本布局中显示内容(文本、无序的项目符号列表,甚至是图像)。我更喜欢一个在初始配置中可能更复杂的解决方案,只要在Markdown中实际编写内容仍然很容易。
因为我不喜欢运行本地服务器,所以我在主HTML文件中编写了我的markdown。
更新:正如第一个答案所指出的,这应该通过CSS来实现。(我相应地更新了我的问题。)仍然,我找不到任何描述如何用CSS做这件事。

ikfrs5lh

ikfrs5lh1#

我使用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支持fenced div,

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

对于样式,我们可以使用flexgrid,两者都很好。

使用flex

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

使用grid

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

q5lcpyga2#

我在一个外部css文件custom.css中创建了两个ID,并使用字段css将其附加到reveal.js文件中:在YAML头中的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>
pw9qyyiw

pw9qyyiw3#

.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>
  • 无需浮动
  • 无需clearfix
  • 大小无关(→仅使用百分比)
  • 2列,3列,4列...

<table>通常被认为是“过时的”(因为它在早期的html中被严重滥用于布局目的,今天仍然用于电子邮件中的html.),但相反,至少作为一个属性layout:table它有许多合法的用途,通常是最简单的解决方案和广泛的兼容性。

nwwlzxa7

nwwlzxa74#

CSS Grid Layout允许非常灵活的布局,两列格式和更复杂的布局。
对于两列,可以使用以下CSS片段。它定义了两个大小相等的列模板,每个模板都是可用宽度的一部分(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>
4sup72z8

4sup72z85#

我用两个浮点<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-容器中使用markdowns,你必须把元素 Package 在p-tags中。如果您将data-markdown写入父section-Tag,则div内部将忽略它
希望我能帮上忙!

5n0oy7gb

5n0oy7gb6#

我发现下面的方法可以显示一个元素,看起来像是在列布局中

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

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

但实际上,它不适用于右边的多个元素,

new9mtju

new9mtju7#

我不能完全理解你,但我猜你可能会在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>

它对我起作用

相关问题