html – 2列在R Markdown中

前端之家收集整理的这篇文章主要介绍了html – 2列在R Markdown中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在R Markdown中是非常新的,我正在为我的工作中的一些新的R用户提供一个R Markdown HTML页面,给他们一个介绍,并通​​过一些简单的演示走过他们.在炫耀头像和尾巴这样的东西的时候,它看起来很乱,很长,因为它打印出一个接一个的输出.只要我的.Rmd的其他部分被分成两列,我想要它们.在我的研究中,我遇到了这个问题: 2 Column Report in R Markdown – Render HTML aside Data Frame.有一些关于HTML代码解决方法的讨论,但是我不是那个级别的HTML或CSS.
我确实尝试包括

< div class =“columns-2”>
< / DIV>

从官方的rmarkdown文档,但没有任何影响

当我准备放弃时,@Molx对Stack Overflow问题发表了评论,表示您可以用***分隔列,但没有给出任何进一步的解释.我在几个方面尝试过:我把我的R代码块中的***包含进来,我分离了我的R代码块,并把它们放在两者之间.当我做了后者时,***只是成为一个横向的规则,没有对列做任何事情.

我希望尽可能避免表格和CSS.如果有人有任何想法,我会很感激.

解决方法

rmarkdown文件
  1. #### Put in your css file or directly in rmarkdown
  2.  
  3. <style>
  4. .col2 {
  5. columns: 2 200px; /* number of columns and width in pixels*/
  6. -webkit-columns: 2 200px; /* chrome,safari */
  7. -moz-columns: 2 200px; /* firefox */
  8. }
  9. .col3 {
  10. columns: 3 100px;
  11. -webkit-columns: 3 100px;
  12. -moz-columns: 3 100px;
  13. }
  14. </style>
  15.  
  16. #### This section will have three columns
  17.  
  18. <div class="col3">
  19. **1** one
  20. **2** two
  21. **3** three
  22. **4** four
  23. **5** five
  24. **6** six
  25. **7** seven
  26. **8** eight
  27. **9** nine
  28. </div>
  29.  
  30. #### This section will have two columns
  31.  
  32. <div class="col2">
  33. ```{r}
  34. head(mtcars)
  35. tail(mtcars)
  36. ```
  37. </div>

给我这个

编辑

要更精确地使用列元素,可以为每组元素使用div:

Rmd文件

  1. <style>
  2. .column-left{
  3. float: left;
  4. width: 33%;
  5. text-align: left;
  6. }
  7. .column-center{
  8. display: inline-block;
  9. width: 33%;
  10. text-align: center;
  11. }
  12. .column-right{
  13. float: right;
  14. width: 33%;
  15. text-align: right;
  16. }
  17. </style>
  18.  
  19. #### This section will have three columns
  20.  
  21. <div class="column-left">
  22. **1** one
  23. **2** two
  24. </div>
  25. <div class="column-center">
  26. **3** three
  27. **4** four
  28. **5** five
  29. **6** six
  30. </div>
  31. <div class="column-right">
  32. **7** seven
  33. **8** eight
  34. **9** nine
  35. </div>

给我

猜你在找的HTML相关文章