Html 在Xaringan中创建图像网格

我正在尝试学习更多的CSS/HTML来定制xaringan幻灯片，可能需要一些帮助

我想在图像网格中放置一些GIF，就像放在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>

我知道，通常可以通过使用

.pull left[]

和

.pull right[]

或使用如下自定义CSS定义节来并排显示两个图像：

.left-code {
  color: #777;
  width: 38%;
  height: 92%;
  float: left;
}
.right-plot {
  width: 60%;
  float: right;
  padding-left: 1%;
}

.pull-left[
<img src=figure1.jpg>
]

.pull-right[
<img src=figure2.jpg>
]

然后将图像放入xaringan幻灯片中，R代码如下：

.left-code {
  color: #777;
  width: 38%;
  height: 92%;
  float: left;
}
.right-plot {
  width: 60%;
  float: right;
  padding-left: 1%;
}

.pull-left[
<img src=figure1.jpg>
]

.pull-right[
<img src=figure2.jpg>
]

但是，它还包含指定所有图像的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

中，因此您可以通过

css在YAML中指定：“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
]

---
标题：“拆分到'xaringan'中的网格”
输出：
xaringan:：moon_阅读器：
css:[“忍术”]
---
班级：四人一组
.栏目[
]
.栏目[
]
.栏目[
其他图像
]
.栏目[
其他图像
]