0

I am adding incremental bullet points inside a div and it doesn't seem to work.

pres.Rmd

---
title: "Incremental in Div"
output:
  xaringan::moon_reader:
    encoding: 'UTF-8'
    self_contained: false
    css: ['default','styles.css']
---

## No div

- Point 1

--

- Point 2

---

## Div direct

Div style is defined directly in HTML/CSS.

<div style="width: 49%;float: left;margin-right: 0.5%;margin-left: 0.5%;">

- Point 1

--

- Point 2

</div>

--

<div style="width: 49%;float: right;margin-right: 0.5%;margin-left: 0.5%;">

- Point 1

--

- Point 2

</div>

---

## Div styles

Div style is defined through classes in the styles.css file.

.pull-left-50[

- Point 1

--

- Point 2

]

--

.pull-right-50[

- Point 1

--

- Point 2

]

styles.css

.pull-right-50 {
  width: 49%;
  float: right;
  margin-right: 0.5%;
  margin-left: 0.5%;
}
.pull-left-50 {
  width: 49%;
  float: left;
  margin-right: 0.5%;
  margin-left: 0.5%;
}
mindlessgreen
  • 11,059
  • 16
  • 68
  • 113

1 Answers1

1

Try this:

---
title: "Incremental in Div"
output:
  xaringan::moon_reader:
    encoding: 'UTF-8'
    self_contained: false
    css: ['default', "style.css"]
---



.pull-left-50[
- Point 1

{{content}}

]

--

- Point 2

{{content}}

--

- Point 3 

{{content}}

--

- Point 4

{{content}}

--

- Point 5

--

.pull-right-50[

- Point 6

{{content}}

]

--

- Point 7

{{content}}


--

- Point 8

{{content}}


--

- Point 9

{{content}}

--

- Point 10
mindlessgreen
  • 11,059
  • 16
  • 68
  • 113
Emi
  • 3,514
  • 8
  • 11
  • Not quite sure I understand what's going on here. You've added 'seal' and `{{}}`. And point 2 is outside the div. How does this work if I have 5 incremental points on left and 5 on right? – mindlessgreen May 13 '19 at 19:19
  • 1
    Ooops you can remove seal. Your previous one doesn't work because div is broken up. If you have more than two points then you'll need to insert {{content}} after Point 2 and continue - I'll post what I mean in a separate answer – Emi May 14 '19 at 01:10