layout - 如何修复此两列幻灯片(代码+图像)的 reveal-md 渲染？

Question

我正在使用 reveal-md从 How to use two-column layout with reveal.js? 中汲取灵感，用代码和图像呈现两列幻灯片.

一个可重现的例子是:

---
title: "Bad two-columns rendering"
author: "Yours truly"
---

![tux](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png) <!-- .element: style="float: right; width: 50%" -->

```python

print("Is the rendering bad?")
print("Yeah!")
print("How can you be sure?")
print("Look at the beak of Tux")

```
<!-- .element: style="width: 50%" -->

一旦渲染，我得到

如果你仔细看，你会发现“代码框”向右过度延伸并与图像重叠(见红色突出显示)

有谁知道如何直接在源代码( Markdown )中解决这个问题？ 这是一个不小的烦恼。我尝试摆弄上面的 Markdown ，但无济于事。

Answer 1

另一种方法是使用更现代的 CSS 属性 flex。 .我认为您的问题导致您正在使用的环境的一些有线模板设置。所以这是我的第二次尝试:

--
title: "Bad two-columns rendering"
author: "Yours truly"
---
<style>
.container{
    display: flex;
}
.col{
    flex: 1;
}
</style>

<div class="container">

<div class="col">

```python

print("Is the rendering bad?")
print("Yeah!")
print("How can you be sure?")
print("Look at the beak of Tux")

```
<!-- .element: style="width: 100%;" -->

</div>

<div class="col">

![tux](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png)

</div>

</div>

这里我使用类来设置 CSS 属性。