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 .