英文:
Border around Markdown embed in RMarkdown
问题
我有一些从这里创建的GitHub个人资料“卡片”，我正在将它们作为Markdown嵌入到pkgdown网站上的RMarkdown页面中。
如何添加边框到这些卡片呢？我在搜索中找到的都是关于如何使用CSS或HTML为图像添加边框，而不是嵌入式的内容。
或者，您也可以考虑更改它们的背景颜色，因为它们在白色背景的页面上可能不太可见。
谢谢。
英文:
I have a couple of Github profile "cards" created from here which I am embedding as Markdown in a RMarkdown page on a pkgdown website.
How would i go about adding a border to these? Anything i have found searching has been about using CSS or html to add borders to images rather than embeds like this.
Or alternatively change the background colour of them - they are white on a white page.
Thanks
答案1
得分: 2
你可以混合使用 markdown 和 html 代码，甚至在你的 RMarkdown 文档中使用 css 代码块来更改样式。在下面的文档中，我将指标卡放在一个带有 class=bordered 的 div 中，然后更改了 bordered 类的 border-style 属性：
.bordered{
border-style: solid;
}
<div class="bordered">
</div>
这是结果：
并排
要并排两个图像，你可以使用 flexbox 策略：
.wrapper {
display: flex;
}
.left {
flex: 50%;
margin:15px;
border-style: solid;
}
.right {
flex: 50%;
margin:15px;
border-style: solid;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
这是结果：
英文:
You can mix markdown and html code and even use css code chunks in your RMarkdown document to change the styling. In the document below, I put the metrics card in a div with class=bordered and then changed the border-style attribute for the bordered class:
title: "test"
output: html_document
editor_options:
chunk_output_type: console
---
```{css echo=FALSE}
.bordered{
border-style: solid;
}
```
<div class="bordered">
</div>
Here's the result:
side-by-side
To put two side-by-side: you could use a flexbox strategy:
```{css echo=FALSE}
.wrapper {
display: flex;
}
.left {
flex: 50%;
margin:15px;
border-style: solid;
}
.right {
flex: 50%;
margin:15px;
border-style: solid;
}
```
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
Here's the result:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论