принудительное разбиение столбца в макете RMarkdown ioslides {.columns-2}

Question

При подготовке презентации с помощью ioslides RMarkdown я столкнулся с проблемой, решение которой не смог найти. Этот ответ также не решил эту конкретную проблему.

Иногда двухколонные макеты лучше всего объяснить чем-либо с изображением с одной стороны и текстом с другой. Однако, как и в следующем примере, разрывы столбцов не работают должным образом.

Есть ли способ принудительно разбить столбцы в определенной точке? Я думал об увеличении высоты изображения справа, но, к сожалению, это иногда не вариант.

---
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)
```

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}
plot(mtcars)
```

Метод 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>