Die Verwendung von zwei-Spalten-layout mit reveal.js?

Ich verwenden reveal.js und Schreibe meine Folien in Markdown-code. Jetzt möchte ich die Anzeige meiner Inhalte (text, ungeordnete Liste von Punkten, oder auch ein Bild) in einem klassischen zwei-Spalten-text-layout. Ich würde es vorziehen, eine Lösung, die komplexer sein können in der anfänglichen Konfiguration, so lange wie das eigentliche schreiben von content in Markdown bleibt einfach.

Da ich lieber nicht ausführen, ein lokaler server, ich Schreibe meine markdown-innerhalb der Haupt-HTML-Datei.

Update: Wie die erste Antwort zeigt dies erreicht werden soll mit CSS. (Ich aktualisierte meine Frage entsprechend.) Dennoch konnte ich nicht finden, eine Beschreibung, wie dies mit CSS.

InformationsquelleAutor jans | 2015-06-16
  1. 19

    Ich habe zwei ID ' s in einer externen css-Datei custom.css, die ich an meinem reveal.js Datei mit dem Feld css: benutzerdefinierte.css in der YAML-header. 

    #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%;
}

    Legte ich div-Elemente mit der rechten und linken-ID ' s in meinem markdown-Dokument zu erzeugen, eine zwei-Spalten-layout.

    <div id="right">

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

</div>
    • Funktioniert perfekt!
    • Dies funktioniert nicht für mich, vielleicht weil ich Schreibe meine markdown-in die Haupt-HTML-Datei und ich glaube nicht, verwenden Sie eine separate markdown-Datei.
    • siehe die Antwort von @DiegoP unten. Beachten Sie auch, dass Sie die ganze Spalte von markdown in einem <p> element.
    • Mein einzige Vorschlag ist, verwenden Sie Klassen anstelle von IDs. Sie sind nur erlaubt, eine ID zu verwenden, wenn, und ich könnte mir vorstellen, dass Sie gerne den #left und #right Elemente mehrmals.
    • für mich, das vermasselt die Druck - /PDF-Ausgabe, wahrscheinlich, weil der Schwimmer. Ich bevorzuge Frank ' s Lösung weiter unten.
    InformationsquelleAutor J. Carew
  2. 18

    Ich bin mit CSS flex, es ist in Ordnung.

    <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>
    • Ich denke, das ist die beste und einfachste Antwort, warum würde jemand verwenden, display: table, ist mir schleierhaft
    InformationsquelleAutor TheRimalaya
  3. 7

    Habe ich das problem gelöst mit zwei schwimmenden <div>-Elemente:

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

    Ich fand heraus, wenn Sie Sie verwenden möchten Abschläge innerhalb der div-container, die Sie haben, um wickeln Sie die Elemente in p-tags. Wenn Sie schreiben data-markdown in das übergeordnete section-Tag, wird es ignoriert innerhalb der div

    Ich hoffe ich konnte helfen!

    InformationsquelleAutor DiegoP
  4. 6

    Die Verwendung von zwei-Spalten-layout mit reveal.js?

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

    Setzen Sie diese in Ihrem benutzerdefinierten Design, d.h. direkt vor

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

    Wie zu benutzen? – ganz einfach! Und nicht beschränkt auf 2 Spalten:

    <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>
    • Keine Schwimmer gebraucht
    • keine clearfix benötigt
    • Größe unabhängig (→ nur Prozentangaben verwendet)
    • 2 Spalten, 3 Spalten, 4 Spalten ...

    <table> tritt oft als "überholt" (da wurde es so schlimm missbraucht für layout-Zwecke in der frühen html-Tagen, und auch heute noch für html in E-Mails...), sondern im Gegenteil-zumindest als Eigenschaft layout:table hat es viele legitime verwendet, ist oft die einfachste Lösung und weit verbreitet kompatibel.

    InformationsquelleAutor Frank Nocke
  5. 4

    Den CSS Grid Layout erlaubt eine sehr flexible layouts, zwei-Säulen-Formate und mehr komplexe layouts.

    Für zwei Spalten, die folgende CSS-snippet verwendet werden können. Es gibt zwei Spalte Vorlagen mit gleicher Größe, je 1 Bruchteil (1fr) von der verfügbaren Breite, und eine Dachrinne Raum von 10px zwischen den Spalten.

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

    Es kann wie folgt verwendet werden

    <section>
  <h2>Slide Title</h2>
  <div class="twocolumn">
    <div>
      Column One
    </div>
    <div>
      Column Two        
    </div>
  </div>
</section>
    • Während ich wie CSS-grids super viel, das funktioniert nicht in CSS-grids
    • Für mich, die CSS-grids-Ansatz gearbeitet reveal.js. Vielleicht würde Sie teilen die Probleme, die Sie gestoßen?
    • Funktioniert bei mir ?
    InformationsquelleAutor FrankSchulz
  6. 1

    Habe ich den folgenden Weg gefunden, um zu zeigen, dass ein element in einer Weise, die es scheint zu sein, in einem Spalten-layout

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

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

    Aber tatsächlich funktioniert es nicht mit mehr als einem element auf der rechten

    InformationsquelleAutor Pasquale Muscettola
  7. 1

    Konnte ich nicht verstehen Sie vollständig, aber ich denke, man kann die Antwort gefunden, in 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>

    war für mich

    InformationsquelleAutor Hossein Vatani
Schreibe einen Kommentar