html - 如何将 RMarkdown 文件导出到具有两列的 HTML 文档?

标签 html r r-markdown

我正在为工作中的一些新 R 用户整理一个 R Markdown HTML 页面,向他们介绍并引导他们完成一些简单的演示。

虽然展示了 headtail 之类的东西,但它最终看起来又乱又长,因为它一个接一个地打印出每个输出。只要我的 .Rmd 的其他部分被分成两列,我就希望它们。

在我的研究中,我遇到了这个 question .有一些关于使用我不理解的 HTML 代码的解决方法的讨论。

我试过包括:

<div class="columns-2">   
</div>

来自官方rmarkdown文档,但没有任何效果。

就在我准备放弃的时候,@Molx 对 Stack Overflow 问题的评论说你可以用 *** 来分隔列,但它没有给出任何进一步的解释。我尝试了几种方法:我将 *** 包含在我的 R 代码块中间,我将我的 R 代码块分开并放置 ***两者之间。当我做后者时,*** 只是变成了一条水平线,对列没有任何作用。

我希望尽可能避免表格和 CSS。

最佳答案

rmarkdown 文件:

#### Put in your css file or directly in rmarkdown

<style>
  .col2 {
    columns: 2 200px;         /* number of columns and width in pixels*/
    -webkit-columns: 2 200px; /* chrome, safari */
    -moz-columns: 2 200px;    /* firefox */
  }
  .col3 {
    columns: 3 100px;
    -webkit-columns: 3 100px;
    -moz-columns: 3 100px;
  }
</style>

#### This section will have three columns

<div class="col3">
**1** one  
**2** two  
**3** three  
**4** four  
**5** five  
**6** six  
**7** seven  
**8** eight  
**9** nine  
</div>

#### This section will have two columns

<div class="col2">
```{r}
head(mtcars)
tail(mtcars)
```
</div>

给我这个

enter image description here


编辑

为了更精确地使用列元素,您可以为每组元素使用一个 div:

rmd文件

<style>
.column-left{
  float: left;
  width: 33%;
  text-align: left;
}
.column-center{
  display: inline-block;
  width: 33%;
  text-align: center;
}
.column-right{
  float: right;
  width: 33%;
  text-align: right;
}
</style>

#### This section will have three columns

<div class="column-left">
**1** one  
**2** two  
</div>
<div class="column-center">
**3** three  
**4** four  
**5** five  
**6** six  
</div>
<div class="column-right">
**7** seven  
**8** eight  
**9** nine  
</div>

给我

enter image description here

关于html - 如何将 RMarkdown 文件导出到具有两列的 HTML 文档?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31753897/

相关文章:

r - 如何从 R 中的向量列表创建矩阵?

r - 如何将R用于多个选择问题?

r - 根据多个变量计算排名

RStudio - 更改默认代码块

css - Distill 博客中的 R 代码无法在桌面中水平滚动

html - 如何展开按钮,它们目前是堆叠的?

python - 如何将 .png 嵌入到 HTML 电子邮件中?

html - 如何删除 div 元素内的 href 下划线?

knitr - 为什么 Pandoc 不检索图像文件?

jquery - CSS jQuery Dropline Menu - 如何使第一行 33px?