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

Question

我正在尝试将一个小图像作为基于蒸馏的网站的distill一部分放入文档中，但在放置时遇到了问题（因为我对正在做的事情有一个糟糕的心理模型，而且我不是 CSS 向导）。我希望将图片设置在文本的左侧，理想情况下，文本在其周围流动。distill

这是我的第一次尝试：

---
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布局定义，并且这个 rstudio-distill 问题说distill“不再支持内联浮动图像”（但我可以将图片设置在左侧，如果我不能拥有它浮动！），以及蒸馏图形布局的描述，但我仍然无法到达那里。

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

Answer 1

在这篇博文中找到了答案。

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