我可以将正文与页边注释对齐吗?

Sea*_*use 5 css latex r r-markdown tufte

我正在使用 tufte R 包创建一个带有页边注释的 html 文档。我的一些页边注中的数字相当高。例如:


    ---
    title: Big sidenote
    output:
      tufte::tufte_html: default
    ---

    ```{r setup, include=FALSE}
    library(tufte)
    # invalidate cache when the tufte version changes
    knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
    options(htmltools.dir.version = FALSE)
    ```


    ```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}

    plot(mtcars)

    ```

    Here is paragraph 1. It's pretty short and it's associated with Fig 1.

    ```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}

    plot(subset(mtcars, cyl==6))

    ```

    I'd like this paragraph to start in line with Fig 2.
    ```

     I would like the paragraph in the main body to begin below the bottom of the figure in the margin.

Run Code Online (Sandbox Code Playgroud)

问题说明

这在降价范围内可能吗?我的 CSS 技能/理解有限。

Sea*_*use 4

我明白了这一点。对于那些熟悉 CSS 的人来说很简单,但对于那些不太了解 CSS 的人来说这里是简单的。页边注释是使用浮动属性创建的。您可以使用 float 属性来禁止浮动元素位于文本一侧。

我创建了一个新的“已清除”类,用于清除右侧的元素:

<style>
  .cleared {clear: right;}
</style>
Run Code Online (Sandbox Code Playgroud)

然后,每当我想要文本跳到下一个图时,我都会创建一个已清除类的 div:

<div class = "cleared"></div>
Run Code Online (Sandbox Code Playgroud)

这是完整的示例:

---
title: Big sidenote
output:
  tufte::tufte_html: default
---

<style>
  .cleared {clear: right;}
</style>

```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```


```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}
plot(mtcars)
```

Here is paragraph 1. It's pretty short and it's associated with Fig 1.

<div class = "cleared"></div>

```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}
plot(subset(mtcars, cyl==6))
```

I'd like this paragraph to start in line with Fig 2.
Run Code Online (Sandbox Code Playgroud)

结果:

在此输入图像描述