web-dev-qa-db-fra.com

Comment utiliser la mise en page à deux colonnes avec révéler.js?

J'utilise révéler.js et écrire mes diapositives en code Markdown. Maintenant, je veux afficher mon contenu (texte, liste non ordonnée de puces ou même une image) dans une disposition de texte classique à deux colonnes. Je préférerais une solution qui peut être plus complexe dans la configuration initiale tant que l'écriture réelle du contenu dans Markdown reste facile.

Comme je préfère ne pas exécuter de serveur local, j'écris ma démarque dans le fichier HTML principal.

Mise à jour: comme l'indique la première réponse, cela devrait être réalisé avec CSS. (J'ai mis à jour ma question en conséquence.) Pourtant, je n'ai trouvé aucune description comment le faire avec CSS.

cssmarkdownreveal.js
43
jans

J'utilise CSS flex, cela fonctionne 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>
22
TheRimalaya

J'ai créé deux identifiants dans un fichier css externe, custom.css, que j'ai joint à mon fichier révéler.js avec le champ css: custom.css dans l'en-tête 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%;
}

J'ai placé des éléments div avec les identifiants droit et gauche dans mon document de démarque pour produire une disposition en deux colonnes.

<div id="right">

- You can place two graphs on a slide
- Or two columns of text
- These are all created with div elements

</div>
19
J. Carew

J'ai résolu le problème avec deux flottants <div> - Éléments:

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

J'ai découvert que si vous souhaitez utiliser des démarques à l'intérieur du conteneur div-, vous devez encapsuler les éléments dans des balises p-. Si vous écrivez data-markdown Dans la balise parent section-, il sera ignoré à l'intérieur du div

J'espère que je pourrais aider!

7
DiegoP

enter image description here

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

Mettez cela dans votre thème personnalisé, c'est-à-dire juste avant

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

Comment utiliser? - facile! Et pas limité à 2 colonnes: 

<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>
  • Aucun flotteur nécessaire
  • aucun clearfix nécessaire
  • indépendant de la taille (→ uniquement les pourcentages utilisés)
  • 2 colonnes, 3 colonnes, 4 colonnes ...

<table> ist souvent considéré comme "obsolète" (car il a été tellement mal utilisé à des fins de mise en page dans les premiers jours html, et encore aujourd'hui pour html dans les e-mails ...) mais au contraire au moins comme une propriété layout:table il a de nombreuses utilisations légitimes, est souvent la solution la plus simple et largement compatible .

6
Frank Nocke

CSS Grid Layout permet des présentations très flexibles, des formats à deux colonnes et des présentations plus complexes.

Pour deux colonnes, l'extrait CSS suivant peut être utilisé. Il définit deux modèles de colonnes de taille égale, chacun 1 fraction (1fr) de la largeur disponible, et un espace de gouttière de 10 px entre les colonnes.

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

Il peut être utilisé comme suit

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

Je ne pouvais pas vous comprendre complètement mais je suppose que vous pouvez trouver la réponse dans 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>

ça a marché pour moi

1
Hossein Vatani

J'ai trouvé la manière suivante de montrer un élément de telle manière qu'il semble être dans une disposition de colonne

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

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

Mais en fait, cela ne fonctionne pas avec plus d'un élément à droite

1
Pasquale Muscettola