【问题标题】：force column break in RMarkdown ioslides {.columns-2} layout在 RMarkdown ioslides {.columns-2} 布局中强制分栏
【发布时间】：2018-10-26 22:46:28
【问题描述】：

在使用 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)
```

【问题讨论】：

我目前的解决方法是插入一些 2-4 <div><br></div>s。但是，imo这不是最好的解决方案
无法重现：/
@MartinSchmelzer，我在项目符号之间添加了一些空白行。现在应该可以重现了。

标签： r markdown r-markdown presentation ioslides

【解决方案1】：

我过去使用过两种方法，都在您链接的问题中得到了答案。我是否遗漏了为什么这些不能满足您的需求？

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

注意：我只使用ioslides 格式测试了这些方法

方法一：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)
```

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

【讨论】：

您能否添加一些详细信息如何定义“forceBreak”类。我猜在标题的某个地方。
射击，忘了我为那个使用了自定义 CSS 模板。我将.forceBreak { -webkit-column-break-after: always; break-after: column; } 行添加到我为公司内部使用而整理的CSS 模板中。将更新答案以反映...
感谢您的所有努力。但是，您是否通过 Q 中的示例检查了这一点？不幸的是，方法 1 并没有改变任何东西。方法 2 效果很好。
我更新了我的示例答案以反映您提供的示例。代码块是我渲染的 .Rmd 文件的完整、逐字的文本，下面的屏幕截图显示了我系统上的输出。如果复制和粘贴上述示例不起作用，那么也许我们需要调查包/pandoc 版本、操作系统设置等之间的潜在差异？如果有帮助，我会在上面发布我的 SessionInfo 和 R Markdown 控制台输出。
您使用的是什么操作系统？ 我必须将绘图块的标题更改为{r, echo = FALSE,fig.width=4.7} 才能使其在我的 Windows 机器上运行。基于此，我认为这可能与不同的 pandoc 或knitr/markdown 版本。

【解决方案2】：

您可以通过在第二列下方添加一个添加clear 样式的空 div 来阻止内容用完第二列下方的空间，从而禁用更下方元素的重排。

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

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

【讨论】：