Я пытаюсь научиться немного больше CSS / HTML для настройки слайдов xaringan и могу использовать некоторую помощь.
Я бы хотел разместить несколько GIF-файлов в сетке изображений, например показано здесь в слайде ксарингана.
Я знаю, что обычно можно отобразить два изображения рядом, используя .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, например:
.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>