R Markdown:将图像放在HTML的右上角并向下移动标题

Kei*_*ith 11 html css r r-markdown

我想在我的R降价报告的右上角放置一个公司徽标图像,然后向下移动标题,比默认位置低3或4厘米.这个想法看起来像是公司的信笺.

任何人都可以建议我如何在我的.Rmd文件中编码?

谢谢你的帮助!

Mar*_*zer 23

选项1:

在RMarkdown文档的开头(或其他地方)添加此脚本:

<script>
   $(document).ready(function() {
     $head = $('#header');
     $head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
   });
</script>
Run Code Online (Sandbox Code Playgroud)

这看起来像

在此输入图像描述

要使脚本生效,图像必须与.Rmd文档位于同一文件夹中.您还可以为<img>标记id添加一定的标记并添加更精确的CSS样式

<style>
  #myLogo {
    float: right;
    width: 120px;
    ...
</style>
Run Code Online (Sandbox Code Playgroud)

选项2:

创建一个额外的HTML文件(例如extLogo.html),其中包含以下徽标:

<div><img src="logo.jpg" width="200px" align="right"></div>
Run Code Online (Sandbox Code Playgroud)

然后修改YAML标头,如下所示:

---
title: "Test"
author: "Martin Schmelzer"
date: "13 Juli 2016"
output: 
  html_document:
    includes:
      in_header: extLogo.html
---
Run Code Online (Sandbox Code Playgroud)

这看起来像

在此输入图像描述

并可能需要一些进一步的保证金/填充选项......