Как использовать раскладку с двумя столбцами с помощью open.js?

Я использую open.js и записываю слайды в код Markdown. Теперь я хочу отображать мой контент (текст, неупорядоченный список маркеров или даже изображение) в классическом двухколоночном макете текста. Я бы предпочел решение, которое может быть более сложным в начальной конфигурации до тех пор, пока фактическая запись содержимого в Markdown остается легкой.

Обновление: поскольку первый ответ указывает, что это должно быть достигнуто с помощью CSS. (Я обновил свой вопрос соответственно.) Тем не менее, я не мог найти никакого описания, как это сделать с помощью CSS.

Ответ 1

Я создал два идентификатора во внешнем файле css, custom.css, который я привязал к моему файлу opens.js с полем css: custom.css в заголовке 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%;
}

Я поместил элементы div с правым и левым идентификатором в мой документ разметки, чтобы создать раскладку из двух столбцов.

<div id="right">

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

</div>

Ответ 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, вам нужно обернуть элементы в p -tags. Если вы напишете data-markdown в родительский section -Tag, он будет проигнорирован внутри div

Я надеюсь, что смогу помочь!

Ответ 3

Я не мог понять вас полностью, но я думаю, вы можете найти ответ в 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>

это сработало для меня

Ответ 4

Я использую CSS flex, он отлично работает.

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

Ответ 5

Я нашел следующий способ показать один элемент таким образом, что он находится в макете столбца

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

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

Но на самом деле это не работает с более чем одним элементом справа

Ответ 6

.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 nothing before col1
    }
}

Поместите это в свою пользовательскую тему, то есть прямо перед

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

Как использовать? - легко! И не ограничиваясь двумя столбцами:

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

Не требуется плавать
не требуется clearfix
независимый размер (→ только проценты)
2 столбца, 3 столбца, 4 столбца...

<table> может иногда казаться out, так как в ранние html-дни он так сильно злоупотреблял. Напротив: камни layout:table, часто являются самым простым решением и широко совместимы.

Ответ 7

CSS Grid Layout позволяет использовать очень гибкие макеты, двухколонные форматы и более сложные макеты.

Для двух столбцов может использоваться следующий фрагмент CSS. Он определяет два шаблона столбцов с равным размером, каждая 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>