html - 在 html 输出的 Markdown 文本周围 float 图形和标题

Question

我正在尝试使用 knitr 构建一个 html 报告，其中有文本描述和一些数字混合。如果可能，我希望能够将数字 float 到一边并在未使用的空间中有文本。我是那里的一部分，但我的问题是图形标题现在与图形本身分离。例如，请参见下图。这是可重现的代码:

---
title: "caption_testing"
author: "Me"
date: "6/23/2021"
output: html_document
---

    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = TRUE)
    ```
Est pellentesque elit ullamcorper dignissim cras. Turpis egestas maecenas pharetra convallis posuere. Iaculis urna id volutpat lacus laoreet. Id volutpat lacus laoreet non. Vulputate dignissim suspendisse in est ante in. Elit eget gravida cum sociis natoque penatibus. Bibendum at varius vel pharetra vel turpis

### An uninteresting heading that spans the width of the page.

    ```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='60%', out.extra='style="float:right; padding:10px"', fig.align='right'}
    knitr::include_graphics('darwinBubble.png')
    ```
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor orci dapibus ultrices in. Auctor augue mauris augue neque. Ornare arcu odio ut sem nulla pharetra diam. Enim blandit volutpat maecenas volutpat. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Mi ipsum faucibus vitae aliquet nec ullamcorper. Cursus euismod quis viverra nibh cras pulvinar. Eget nunc scelerisque viverra mauris. Pharetra convallis posuere morbi leo. Elit scelerisque mauris pellentesque pulvinar pellentesque.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

这是相同的 r 块，但只有基本要素。我不相信 fig.align 在这里做了任何或大部分工作，但我从另一个我现在找不到的 SO 帖子中得到了使用 out.extra 的想法。

{r echo=FALSE, fig.cap="caption", out.width='60%', out.extra='style="float:right; padding:10px"', fig.align='right'}
knitr::include_graphics('darwinBubble.png')

这就是这对我产生的影响。

提前致谢，任何帮助表示赞赏!

Answer 1

解释以下 CSS 技巧的逻辑 here .

We can format the figure as a table (with image as it only cell) andthe paragraph (where the figure caption live) as a table caption andplace it on the bottom (or top).

注意:我需要裁剪你的 darwinBubble.png图像，因此 out.width='100%' . Paddings是可选的。

---
title: "caption_testing"
author: "Me"
date: "6/23/2021"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css float-figure-caption, echo = FALSE}
div.figure {
  display: table;
  float: right;
  padding-left: 30px;
  padding-bottom: 10px;
}
div.figure p {
  display: table-caption;
  caption-side: bottom;
  padding-left: 30px;
}
```

Est pellentesque elit ullamcorper dignissim cras. Turpis egestas maecenas pharetra convallis posuere. Iaculis urna id volutpat lacus laoreet. Id volutpat lacus laoreet non. Vulputate dignissim suspendisse in est ante in. Elit eget gravida cum sociis natoque penatibus. Bibendum at varius vel pharetra vel turpis

### An uninteresting heading that spans the width of the page.

```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='right'}
knitr::include_graphics('darwinBubble.png')
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor orci dapibus ultrices in. Auctor augue mauris augue neque. Ornare arcu odio ut sem nulla pharetra diam. Enim blandit volutpat maecenas volutpat. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Mi ipsum faucibus vitae aliquet nec ullamcorper. Cursus euismod quis viverra nibh cras pulvinar. Eget nunc scelerisque viverra mauris. Pharetra convallis posuere morbi leo. Elit scelerisque mauris pellentesque pulvinar pellentesque.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.  

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

输出:

编辑

Could CSS classes be used to specify only certain chunks...?

我希望有人能提供比以下 hack 更好的解决方案，我们将整个块包装在 <div> 中。 .

---
title: "caption_testing"
author: "Me"
date: "6/23/2021"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css float-right-figure-caption, echo = FALSE}
.my-right-figure {
  display: table;
  float: right;
  padding-left: 30px;
  padding-bottom: 10px;
}
.my-right-figure p {
  display: table-caption;
  caption-side: bottom;
  padding-left: 30px
}
.figure {
  display: contents;
}
```

```{css float-left-figure-caption, echo = FALSE}
.my-left-figure {
  display: table;
  float: left;
  padding-right: 30px;
  padding-bottom: 10px;
}
.my-left-figure p {
  display: table-caption;
  caption-side: bottom;
  padding-right: 30px
}
.figure {
  display: contents;
}
```

Est pellentesque elit ullamcorper dignissim cras. Turpis egestas maecenas pharetra convallis posuere. Iaculis urna id volutpat lacus laoreet. Id volutpat lacus laoreet non. Vulputate dignissim suspendisse in est ante in. Elit eget gravida cum sociis natoque penatibus. Bibendum at varius vel pharetra vel turpis

### An uninteresting heading that spans the width of the page.

<div class="my-right-figure">
```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='right'}
knitr::include_graphics('darwinBubble.png')
```
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor orci dapibus ultrices in. Auctor augue mauris augue neque. Ornare arcu odio ut sem nulla pharetra diam. Enim blandit volutpat maecenas volutpat. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Mi ipsum faucibus vitae aliquet nec ullamcorper. Cursus euismod quis viverra nibh cras pulvinar. Eget nunc scelerisque viverra mauris. Pharetra convallis posuere morbi leo. Elit scelerisque mauris pellentesque pulvinar pellentesque.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.  

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

<div class="my-left-figure">
```{r echo=FALSE, fig.cap="**Figure 2**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='left'}
knitr::include_graphics('darwinBubble.png')
```
</div>

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.  

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

Semper risus in hendrerit gravida rutrum quisque non tellus. Massa vitae tortor condimentum lacinia quis vel eros donec. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Nec ultrices dui sapien eget mi proin sed libero. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices mi tempus imperdiet nulla. Magna ac placerat vestibulum lectus mauris ultrices. Amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui sapien. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Id velit ut tortor pretium viverra suspendisse potenti nullam ac.

输出:

还有我们

can wrap the code chunk in a fenced Div with a class name, sothat you can reuse the CSS defined for the class.

参见@Yihui 的 SO 回答 here .

::: {.my-right-figure}
```{r echo=FALSE, fig.cap="**Figure 1**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='right'}
knitr::include_graphics('darwinBubble.png')
```
::: 

::: {.my-left-figure}
```{r echo=FALSE, fig.cap="**Figure 2**. This figure caption to ideally be placed underneath the figure where it will have many words and explain great things. As a bonus, the caption margins will match up with that of the figure.", out.width='100%', fig.align='left'}
knitr::include_graphics('darwinBubble.png')
```
:::