调整蒸馏文档中的图形大小/位置

Question

我正在尝试将一个小图像作为distill-based web site 的一部分放入distill 文档中，但在放置时遇到了问题（因为我对distill 所做的事情有一个糟糕的心理模型，而不是CSS 向导）。我希望将图片设置在文字的左侧，最好是文字在其周围流动。

这是我的第一次尝试：

---
title: "Distill picture example"
site: distill::distill_website
---

<img align="left" src="django_small.png" width="50">
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Make this a little longer so it will demonstrate wrapping?)

结果（使用 rmarkdown::render() 编译）：内部 CSS 机制覆盖了我请求的 50 像素宽度，而是以全宽呈现。

第二次尝试，我明确告诉distill 它应该使用l-body-side 布局：

---
title: "Distill picture example"
site: distill::distill_website
---

<div class "layout-chunk" data-layout="l-body side">
<img align="left" src="django_small.png" width="50">
</div>
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Not long enough to demonstrate wrapping?)

这样更接近，但我更希望将图片设置在文本的左侧（而不是在其上方），并且理想情况下，文本围绕图片流动。我看过distill layout definitions 和this rstudio-distill issue，上面写着distill“不再支持内联浮动图像”（但如果我不能将图片设置在左侧，我可以它漂浮着！）和this description of distill figure layouts，但我仍然无法到达那里。

我想可能有一些 CSS 和/或两列单行表格布局的神奇组合可以满足我的需求，但可能需要数小时的反复试验（超出我已经尝试过的时间）花费）来弄清楚...

Answer 1

在this blog post找到答案。

---
title: "Distill picture example"
site: distill::distill_website
---

:::float-image

```{r out.width='50px', out.extra='style="float:left; padding:10px"', echo=FALSE}
knitr::include_graphics("django_small.png")
```
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Not long enough to demonstrate wrapping?)

:::

---

将其包装在表格中似乎也比我预期的更容易/工作得更好。 （如果可能的话，我仍然希望让文字环绕图片......）

---
title: "Distill picture example"
site: distill::distill_website
---

<table>
<tr>
<td>
<img align="left" src="django_small.png" width="50">
</td>
<td>
Here is some text that should be included, more than one line ... lorem ipsum when in the course of human events fourscore years and ten because I said so. (Not long enough to demonstrate wrapping?)
</td>
</tr>