web-dev-qa-db-ja.com

rename.jsで2列レイアウトを使用する方法は？

私はreveal.jsを使用し、Markdownコードでスライドを記述します。次に、従来の2列のテキストレイアウトでコンテンツ（テキスト、箇条書きの順不同リスト、または画像）を表示します。 Markdownでのコンテンツの実際の書き込みが簡単である限り、初期構成がより複雑になる可能性のあるソリューションをお勧めします。

ローカルサーバーを実行したくないので、メインHTMLファイル内にマークダウンを記述します。

更新：最初の答えが示すように、これはCSSで達成されるべきです。 （それに応じて質問を更新しました。）それでも、CSSでそれを行う方法についての説明は見つかりませんでした。

cssmarkdownreveal.js
43
jans

CSSフレックスを使用していますが、正常に機能しています。

<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

外部cssファイルcustom.cssに2つのIDを作成しました。これは、YAMLヘッダーのcss：custom.cssフィールドを使用して、reveal.jsファイルに添付しました。

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

マークダウンドキュメントに左右のIDを持つdiv要素を配置して、2列のレイアウトを作成しました。

<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

2つのフローティング<div>- Elementsで問題を解決しました。

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

div- container内でマークダウンを使用する場合、p- tagsで要素をラップする必要があることがわかりました。 data-markdownを親section- Tagに書き込むと、div内では無視されます

私が助けてくれることを願っています！

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

これをカスタムテーマ、つまり直前に配置します

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

使用方法–簡単！そして、2列に限定されません：

<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>
  • フロートは不要
  • 修正不要
  • サイズに依存しない（→使用されるパーセンテージのみ）
  • 2列、3列、4列...

<table>はしばしば「時代遅れ」と見なされません（初期のhtml時代にはレイアウト目的でひどく乱用され、今日でも電子メールのhtmlに悪用されていたからです...）が、少なくともプロパティlayout:table多くの正当な用途があり、多くの場合、最も単純なソリューションであり、 広く互換 です。

6
Frank Nocke

CSSグリッドレイアウト は、非常に柔軟なレイアウト、2列形式、およびより複雑なレイアウトを可能にします。

2列の場合、次のCSSスニペットを使用できます。等しいサイズの2つの列テンプレートを定義し、それぞれが1分数（1fr）使用可能な幅、および列間の間隔が10pxの。

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

次のように使用できます

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

私はあなたを完全には理解できませんでしたが、答えは 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>

それは私のために働いた

1
Hossein Vatani

列レイアウトにあるように1つの要素を表示する次の方法を見つけました

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

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

しかし、実際には右側の複数の要素では機能しません

1
Pasquale Muscettola