Как я могу исправить рендеринг этого двухколоночного слайда (код + изображение) при открытии-md?

Question

Я использую reveal-md для рендеринга слайда из двух столбцов с кодом и изображением, вдохновленный Как использовать макет из двух столбцов с раскрытием. 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%" -->

После рендеринга я получаю

If you look attentively, you can see that the "code box" overextends to the right and overlaps with the image (see the red highlighting)

введите описание изображения здесь

Кто-нибудь знает, как исправить прямо в исходнике (уценке) кода? Это не такое уж и незначительное раздражение. Я попробовал поиграть с уценкой выше, но безуспешно.

Answer 1

Поскольку вы работаете с элементами float, вы должны разместить оба элемента и изменить их порядок

.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: Sometimes it helps to set an element to overflow: hidden;

---

Debuging:

Make sure that the Source Code looks like that:

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

Для этого вы можете использовать Консоль разработчика браузера (например, Chrome DevTools )

Answer 2

Другой способ сделать это - использовать более современный атрибут CSS под названием flex. Я думаю, что ваши проблемы связаны с некоторыми настройками проводных шаблонов среды, которую вы используете. Итак, вот мой второй go:

--
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.

пример скриншота