在准备带有RMarkdown的ioslides的演示文稿时,我遇到了一个无法解决的问题。 This answer也没有解决此特定问题。

有时,两列布局最好用一侧的图像和另一侧的文本来解释某些内容。但是,如下面的示例所示,分栏符似乎没有按预期工作。

有什么方法可以在特定点强制分栏符吗?我已经考虑过增加右侧的图像高度,但是不幸的是,有时这不是一个选择。

---
title: "Some stange column break"
output:
  ioslides_presentation:
    widescreen: true
---

## Slide Title {.columns-2 .smaller}
### Slide Subtitle

>- Some bullet points which take up some space space space space space space space

>- on the column on the left

>- which are then wrapped to the right column.

>- *Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.*

>- line break after this longer bullet point but intead it breaks in some strange place even though it would have space at the bottom of the left column!

<!-- the columns should break here -->

```{r, echo = FALSE, out.width = "470px"}
plot(mtcars)
```


r - 在RMarkdown ioslides {.columns-2}布局中强制列中断-LMLPHP

最佳答案

我过去使用过两种方法,在您链接的问题中都可以回答。我是否想知道为什么这些都不满足您的需求?

方法1似乎是您所追求的,但是我个人倾向于使用方法2,因为我喜欢具有不同宽度的列的灵活性。

注意:我仅使用ioslides格式测试了这些方法



方法1:forceBreak,内联样式标签

这需要定义一个附加的CSS类,您可以在文档开始处进行内联。

---
title: "Untitled"
output:
  ioslides_presentation:
      widescreen: true
---

<style>
.forceBreak { -webkit-column-break-after: always; break-after: column; }
</style>


## Slide Title {.columns-2 .smaller}
### Slide Subtitle

>- Some bullet points which take up some space space space space space space space

>- on the column on the left

>- which are then wrapped to the right column.

>- *Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.*

>- line break after this longer bullet point but intead it breaks in some strange place even though it would have space at the bottom of the left column!

<p class="forceBreak"></p>

```{r, echo = FALSE, fig.width=4.7}
plot(mtcars)
```


r - 在RMarkdown ioslides {.columns-2}布局中强制列中断-LMLPHP

方法2:HTML标记

此方法不需要任何其他CSS定义或外部文件。

---
title: "Untitled"
output: ioslides_presentation
---

## Another Method for Two Column Layouts

<div style="float: left; width: 40%;">
+ This text is on the left
</div>

<div style="float: right; width: 60%;">
+ This text is on the right
</div>

10-07 15:36