在提炼文档中调整数字 size/placement

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, and this rstudio-distill issue which says that distill "does not support the inline floating image anymore" (but I would be OK with just setting the picture to the left, if I can't have it floating!), and this description of distill figure layouts，但我仍然无法到达那里。

我想可能会有一些神奇的组合 CSS and/or 两列，一行 table 布局可以满足我的要求，但可能需要几个小时反复试验（超出我已经花费的时间）来弄清楚...

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

:::

将其包装在 table 中似乎也 easier/worked 比我预期的要好。（如果可能的话，我仍然希望让文字环绕图片......）

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

在提炼文档中调整数字 size/placement

adjust figure size/placement in a distill document

css

r

r-markdown

r-distill