在 Xaringan 中创建图像网格答案

【问题标题】：Create an Image Grid in Xaringan在 Xaringan 中创建图像网格
【发布时间】：2019-03-10 05:37:06
【问题描述】：

我正在尝试学习更多 CSS/HTML 来自定义 xaringan 幻灯片，并且可以使用一些帮助。

我想将一些 GIF 放在图像网格中，例如 the one shown here 到 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>

【问题讨论】：

标签： html css r xaringan

【解决方案1】：

您可以使用扩展主题 here 执行此操作。此主题包含在 xaringan 的更高版本中，因此您可以通过 css: "ninjutsu" 在 YAML 中指定。布局应如下所示：

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

【讨论】：