在 html 输出的降价中围绕文本浮动图形和标题
Float graphic figure and caption around text in rmarkdown for hmtl output
我正在尝试使用 knitr 构建一个 html 报告，其中混合了一些数字的文本描述。如果可能的话，我希望能够将数字浮动到一边并在其中插入文本未使用的 space。我是那里的一部分，但我的问题是图形标题现在与图形本身分离。例如，请参见下图。这是可重现的代码：
---
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 post 中的 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')
这是为我生成的结果。
提前致谢，感谢任何帮助！
我发现的另一种选择是使用 Tufte Rmarkdown 模板，您可以重新创建它，但 Tufte 格式已经具有该类型的文档布局，我将图标题加长以尝试复制你的长度。 Tufte chapter
我使用的代码只是试图展示可以使用 Tufte 格式保持与图像相连的图形
---
title: "An Example Using the Tufte Style"
author: "John Smith"
output:
tufte::tufte_html: default
---
```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```
```{r fig-margin, fig.margin = TRUE, fig.cap = "MPG vs horsepower, colored by transmission.MPG vs horsepower, colored by transmission.MPG vs horsepower, colored by transmission.MPG vs horsepower, colored by transmission.", fig.width=3.5, fig.height=3.5, cache=TRUE, message=FALSE}
library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
geom_point() + geom_smooth() +
theme(legend.position = 'bottom')
```
解释了以下CSS技巧的逻辑。
We can format the figure as a table (with image as it only cell) and
the paragraph (where the figure caption live) as a table caption and
place 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, so
that you can reuse the CSS defined for the class.
看@一辉的SO回答.
::: {.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')
```
:::
我正在尝试使用 knitr 构建一个 html 报告，其中混合了一些数字的文本描述。如果可能的话，我希望能够将数字浮动到一边并在其中插入文本未使用的 space。我是那里的一部分，但我的问题是图形标题现在与图形本身分离。例如，请参见下图。这是可重现的代码：
---
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 post 中的 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')
这是为我生成的结果。
提前致谢，感谢任何帮助！
我发现的另一种选择是使用 Tufte Rmarkdown 模板，您可以重新创建它，但 Tufte 格式已经具有该类型的文档布局，我将图标题加长以尝试复制你的长度。 Tufte chapter
我使用的代码只是试图展示可以使用 Tufte 格式保持与图像相连的图形
---
title: "An Example Using the Tufte Style"
author: "John Smith"
output:
tufte::tufte_html: default
---
```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```
```{r fig-margin, fig.margin = TRUE, fig.cap = "MPG vs horsepower, colored by transmission.MPG vs horsepower, colored by transmission.MPG vs horsepower, colored by transmission.MPG vs horsepower, colored by transmission.", fig.width=3.5, fig.height=3.5, cache=TRUE, message=FALSE}
library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
geom_point() + geom_smooth() +
theme(legend.position = 'bottom')
```
解释了以下CSS技巧的逻辑
We can format the figure as a table (with image as it only cell) and the paragraph (where the figure caption live) as a table caption and place 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, so that you can reuse the CSS defined for the class.
看@一辉的SO回答
::: {.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')
```
:::