html - 在 Xaringan 中创建图像网格
问题描述
我正在尝试学习更多的 CSS/HTML 来自定义 xaringan 幻灯片,并且可以使用一些帮助。
我想将一些 GIF 放在一个图像网格中,就像这里显示的那样,放到一张 xaringan 幻灯片中。
.pull-left[]
我知道通常可以通过使用&.pull-right[]
或使用自定义 CSS 定义部分来并排显示两个图像,如下所示:
.left-code {
color: #777;
width: 38%;
height: 92%;
float: left;
}
.right-plot {
width: 60%;
float: right;
padding-left: 1%;
}
然后将图像放在带有 R 代码的 xaringan 幻灯片中,如下所示:
.pull-left[
<img src=figure1.jpg>
]
.pull-right[
<img src=figure2.jpg>
]
对于图像网格,自定义 CSS 将是:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
但是,它还包含指定所有图像的 HTML 代码,因此我不太确定如何将两者集成到 xaringan 幻灯片中。
<div class="row">
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
解决方案
您可以使用此处的扩展主题来执行此操作。此主题包含在更高版本中,xaringan
因此您可以在 YAML 中指定css: "ninjutsu"
. 布局应如下所示:
---
title: "Split to grid in `xaringan`"
output:
xaringan::moon_reader:
css: ["ninjutsu"]
---
class: split-four
.column[
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
]
.column[
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
]
.column[
other images
]
.column[
other images
]
推荐阅读
- r - 如何减少地理地图的情节和边界之间的空间?
- google-app-engine - 如何在 Go 中向第二代 App Engine 应用程序添加自定义跟踪?
- java - 我如何停止使用 mockito 调用方法 void?
- android - 如何从我的代码中启用 Animator Duration Scale?
- ibm-cloud-private - 访问 ibm 云私有仪表板
- cryptol - cryptol:不同宽度的算术
- python - 按特定元素拆分列表以获取列表列表 Python
- javascript - Unirest - 设置代理
- spring - 为什么亚马逊sqs不支持事务?
- wpf - 使用 Renci.SshNet 通过 ssh 连接读取输出流