RMarkdown ioslides {..columns 2}布局中的强制列断裂

Question

在用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"}

阴谋(地铁)

​

​

Answer 1

我过去用过两种方法，两种答案都是在你的问题上联系起来的。我是不是漏掉了为什么这些不符合你的需要？

方法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}

阴谋(地铁)

​

​

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

Answer 2

通过在第二列下面添加一个空div，添加clear样式，从而阻止内容耗尽第二列下面的空间，从而禁用了下面元素的再流。

<div style="clear: both;"></div>

我从这里发现了这个：https://css-tricks.com/all-about-floats/