2 column Section in R Markdown

Question

I'm very new at R Markdown and I'm putting together an R Markdown HTML page for some new R users at my work to give them an intro and walk them through some simple demos. While showing off things like head and tail, it ends up looking messy and long because it prints out each output one after the other. I would like them as long as other sections of my .Rmd to be split into two columns. In my research, I came across this question: 2 Column Report in R Markdown - Render HTML aside Data Frame. There was some discussion of workarounds with HTML code but I'm not at that level in HTML or CSS. I did try including

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

from the official rmarkdown documentation, but it didn't have any effect

As I was ready to give up, there was a comment on the Stack Overflow question by @Molx saying that you can separate columns with ***, but didn't give any further explanation. I tried it out in a few ways: I included the *** in the middle of my R code chunk, I separated my R code chunks and put the *** between the two. When I did the latter, the *** simply became a horizontal rule and did nothing with columns.

I'm hoping to avoid tables and CSS if possible. If anyone has any thoughts on this, I'd appreciate it.

Answer 1

rmarkdown file:

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

Gives me this

---

Edit

To be more precise with the column elements, you can use a div for each set of elements:

Rmd file

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

Gives me

Answer 2

来自rawr的自定义css解决方案很好，但如果您想要更多自定义并完全避免使用显式css，还有另一种方法。由于markdown使用Bootstrap-layout，我们可以使用Bootstraps网格布局进行详细设计：

唯一的缺点是一些额外的html标签

示例：

---
title: "test"
author: "Testperson"
output:
  html_document
---

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

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

<div class = "row">
<div class = "col-md-6">
```{r cars,  warning = FALSE, echo = FALSE, dev=c('svg')}
plot(pressure)
```
</div>
<div class = "col-md-6">
```{r pressure, warning = FALSE, echo=FALSE, dev=c('svg')}
plot(pressure)
```
</div>
</div>

Answer 3

如果要导出为pdf，可以在带有包含的标题中执行此操作。

在不使用css文件的情况下，我使用以下方法创建了一个双列环境。

1st：我创建了文件header.tex。 header.tex包括以下声明：

\usepackage{multicol}
\newcommand{\btwocol}{\begin{multicols}{2}}
\newcommand{\etwocol}{\end{multicols}}

第二：我将以下命令放入我的文档标题

---
title: "My title"
author: "My name"
date: "Today"
output:
    beamer_presentation:
        highlight: haddock
    includes:
        in_header: header.tex
        keep_tex: yes
---

以下是正文的示例和带有两列的输出图片。

***********
\btwocol
```{r, results="asis"}
print("test")
```

Here is some text that also is in two column environment.
\etwocol

Now only one column

这是幻灯片的样子：

Answer 4

用于创建多个列的CSS解决方案不允许控制列中断发生的位置。似乎会自动插入分栏以在列之间均匀分配内容，这并不总是您想要的。
＆＃34; ***＆＃34; markdown和rmarkdown中的符号插入水平换行符，而不是新列。

除幻灯片演示文稿的.Rmd格式外，Rstudio还提供.Rpres幻灯片演示文稿格式（Rpresentations）。 Rpresentations使用略微不同的降价风格，其中＆＃34; ***＆＃34;符号插入一个新列。

下面是RStudio介绍Rpresentations的链接：
Two Column Layouts
Authoring R Presentations

以下是与您类似的StackOverflow问题的链接：
Two Column Layouts in RStudio
Two Column Layouts in markdown

Rpresentation格式的最大缺点是它不支持嵌入式闪亮应用程序以实现交互式可视化。但是Rpresentation确实支持交互式webgl图。下面是一个简单的例子。您可以将其保存到.Rpres文件中，在RStudio中打开它，然后将其编译为HTML幻灯片演示文稿。请注意最后一张幻灯片中的交互式webgl图，您可以使用鼠标进行操作。

Simple R Presentation
========================================================
title: "Simple R Presentation"
author: John Doe
date: `r format(Sys.time(), "%m/%d/%Y")`
width: 1900
height: 1000
```{r setup, include=FALSE}
# This is an R setup chunk, containing default options applied to all other chunks
library(knitr)
# This sets the chunk default options
opts_chunk$set(cache=TRUE, collapse=TRUE, error=FALSE, prompt=TRUE)
# This sets the chunk display theme
thm <- knit_theme$get("acid")
knit_theme$set(thm)
# This sets some display options
options(digits=3)
options(width=80)
```


My First Slide
========================================================
Hello World!  
Creating Rpresentations isn't difficult at all!  

<img src="https://community.filemaker.com/servlet/JiveServlet/showImage/2-180549-7694/staples-easy-button.png" width="500" height="500" />


***

The Cauchy-Schwarz Inequality:  

$$
\left( \sum_{k=1}^n a_k b_k \right)^2 
\leq 
\left( \sum_{k=1}^n a_k^2 \right) 
\left( \sum_{k=1}^n b_k^2 \right) 
$$



Slide With R Code Chunk and Output in Two Columns
========================================================

First column contains simple R code that returns the summary of the cars data frame:  
```{r, summ_cars, eval=FALSE, echo=TRUE, results="hold", size="tiny"}
summary(cars)
```
***
Second column contains the output of the code in the first column:  
```{r, summ_cars, eval=TRUE, echo=FALSE, size="tiny"}
```



Slide With Plot
========================================================

First column with R code:  
```{r, plot_cars, eval=TRUE, echo=(-(1:1)), fig.show="hide"}
par(cex.lab=1.5, cex.axis=1.5, cex.main=1.5, cex.sub=1.5)
plot(cars)
```

***

Second column with plot:  
```{r, plot_cars, eval=TRUE, echo=FALSE, fig.width=10, fig.height=8}
```



Slide with Interactive 3d Surface Plot
========================================================

First column with R code:  
```{r, rgl_surf3d, eval=FALSE, echo=TRUE, webgl=TRUE, fig.show="hide"}
library(rgl)  # load rgl
knit_hooks$set(webgl=hook_webgl)
# define function of two variables
foo <- function(x, y) y*sin(x)
# draw 3d surface plot of function
persp3d(x=foo, xlim=c(-5, 5), ylim=c(-5, 5), col="green", axes=FALSE)
```

***

Second column with plot:  
```{r, rgl_surf3d, eval=TRUE, echo=FALSE, webgl=TRUE, fig.width=10, fig.height=8}
```

Answer 5

对此线程的最新贡献，只是要指出的是，您可以结合使用@rawr和@Alison的答案来为 HTML和PDF启用多列部分。 Rmarkdown / knitr非常聪明，可以根据所需的输出格式仅解析相关命令。我发现我经常将同一文档编织成多种格式，因此非常方便。

这是一个充实的示例：https://github.com/grantmcdermott/two-col-test