css - ¿Cómo usar el diseño de dos columnas con reveal.js?

markdown

Question

Uso reveal.js y escribo mis diapositivas en el código de Markdown. Ahora quiero mostrar mi contenido (texto, lista desordenada de viñetas o incluso una imagen) en un diseño clásico de dos columnas. Preferiría una solución que puede ser más compleja en la configuración inicial, siempre y cuando la escritura real del contenido en Markdown sea fácil.

Como prefiero no ejecutar un servidor local, escribo mi rebaja dentro del archivo HTML principal.

Actualización: como indica la primera respuesta, esto debería lograrse con CSS. (Actualicé mi pregunta en consecuencia.) Aún así, no pude encontrar ninguna descripción de cómo hacerlo con CSS.

Answer 1

Creé dos ID en un archivo css externo, custom.css, que adjunté a mi archivo reveal.js con el campo css: custom.css en el encabezado YAML.

#left {
left:-8.33%;
text-align: left;
float: left;
width:50%;
z-index:-10;
}
#right {
left:31.25%;
top: 75px;
float: right;
text-align: right;
z-index:-10;
width:50%;
}

Coloqué elementos div con las identificaciones derecha e izquierda en mi documento de reducción para producir un diseño de dos columnas.

<div id="right">
- You can place two graphs on a slide
- Or two columns of text
- These are all created with div elements
</div>

Answer 2

El diseño de cuadrícula de CSS permite diseños muy flexibles, formatos de dos columnas y diseños más complejos.

Para dos columnas, se puede usar el siguiente fragmento de CSS. Define dos plantillas de columnas con el mismo tamaño, cada una fracción (1 1fr ) del ancho disponible, y un espacio de cuneta de 10 píxeles entre las columnas.

.twocolumn {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
text-align: left;
}

Se puede usar de la siguiente manera

<section>
<h2>Slide Title</h2>
<div class="twocolumn">
<div>
Column One
</div>
<div>
Column Two
</div>
</div>
</section>

Answer 3

Estoy usando CSS flex, está funcionando bien.

<style>
.container{
display: flex;
}
.col{
flex: 1;
}
</style>
<div class="container">
<div class="col">
Column 1 Content
</div>
<div class="col">
Column 2 Content
</div>
</div>

Answer 4

He encontrado la siguiente manera para mostrar un elemento de tal manera que parece estar en un diseño de columna

Text going to the right <!-- .element: style="float: right; width: 40%" -->
Text going on the left column <!-- .element: style="width: 40%" -->

Pero en realidad no funciona con más de un elemento a la derecha

Answer 5

No podría comprenderte por completo, pero supongo que puedes encontrar la respuesta en ramnathv post.

---
layout: slide
---
{{{ content }}}
<div class=''left'' style=''float:left;width:{{left.width}}''>
{{{ left.html }}}
</div>
<div class=''right'' style=''float:right;width:{{right.width}}''>
{{{ right.html }}}
</div>

funcionó para mí

Answer 6

Resolví el problema con dos elementos <div> flotantes:

<section>
<div style="text-align: left; float: left;">
<p data-markdown>- This is my first left element</p>
<p data-markdown>- This is my second left element</p>
<!-- more Elements -->
</div>
<div style="text-align: right; float: right;">
<p data-markdown>- This is my first right element</p>
<p data-markdown>- This is my second rightelement</p>
<!-- more Elements -->
</div>
</section>

Descubrí que, si desea usar rebajas dentro del contenedor div , debe envolver los elementos en etiquetas p . Si escribe data-markdown en la section padre -Tag, se ignorará dentro del div

¡Espero poder ayudar!

Answer 7

.multiCol {
display: table;
table-layout: fixed; // don''t fudge depending on content
width: 100%;
text-align: left; // matter of taste, makes imho sense
.col {
display: table-cell;
vertical-align: top;
width: 50%;
padding: 2% 0 2% 3%; // some vertical, and between columns
&:first-of-type { padding-left: 0; } // there''s nothing before col1
}
}

Pon esto en tu tema personalizado, es decir, justo antes

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

¿Cómo utilizar? - ¡facil! Y no limitado a 2 columnas:

<section>
<h3>Doing two-column (this headline still full-width)</h3>
<div class=''multiCol''>
<div class=''col''>
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
</div>
<div class=''col''>
Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
</div>
</div>
And simply more regular full-width text in the following. But hey, there is also:
<div class=''multiCol''>
<div class=''col''>Also works for 3 columns...</div>
<div class=''col''>...as we can show in...</div>
<div class=''col''>...this example here.</div>
</div>
</section>

• No se necesita flotar
• no se necesita un clearfix
• tamaño independiente (→ solo porcentajes utilizados)
• 2 columnas, 3 columnas, 4 columnas ...

<table> menudo se considera "obsoleto" (ya que se abusó tanto para fines de diseño en los primeros días html, y todavía hoy para html en correos electrónicos ...) pero al contrario al menos como un layout:table propiedad layout:table tiene muchos usos legítimos, a menudo es la solución más simple y ampliamente compatible .