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

Question

我正在使用 reveal-md to render a two-column slide with code and an image, taking inspiration from 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) 代码中解决这个问题？这是一个不小的烦恼。我尝试摆弄上面的降价，但无济于事。

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 属性。

Answer 2

当您使用浮动元素时，您应该浮动这两个元素并更改它们的顺序

.element {
    float: left;
    width: 50%;
}

整个示例如下所示：

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

```python

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

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

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

PS：有时将元素设置为 overflow: hidden;

会有所帮助

调试中：

确保源代码看起来像这样：

<section data-markdown="" data-markdown-parsed="true" 
    style="top: 16.5px; display: block;" class="present">
    <pre style="float: left; width: 50%;"><code class="python hljs">
print(<span class="hljs-string">"Is the rendering bad?"</span>)
print(<span class="hljs-string">"Yeah!"</span>)
print(<span class="hljs-string">"How can you be sure?"</span>)
print(<span class="hljs-string">"Look at the beak of Tux"</span>)
</code></pre><!-- -->

<p style="float: left; width: 50%;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png" alt="tux">
</p>
<!-- -->
</section>

您可以使用浏览器开发者控制台来执行此操作（例如 Chrome DevTools）

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

How can I fix the reveal-md rendering of this two-column slide (code+image)?

markdown

layout

reveal.js

调试中：