在Xaringan中创建一个图像网格

Question

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

我想把像Gazxswpoi这样的图像网格中的一些GIF放到xaringan幻灯片中。

the one shown here

我知道通常可以使用和.pull-left[]并通过定义具有自定义CSS的部分来并排显示两个图像：

.pull-right[]

然后，人们会将图像放在带有R代码的xaringan幻灯片中，如下所示：

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

对于图像网格，自定义CSS将是：

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

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

但是，它还包括指定所有图像的HTML代码，因此我不太确定如何将这两个图像集成到xaringan幻灯片中。

.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;
}

Answer 1

您可以使用扩展主题

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

执行此操作。这个主题包含在here的更高版本中，因此您可以通过xaringan在YAML中指定。布局应如下所示：

css: "ninjutsu"