Анна!

Советую выносить на поля ссылки и любые другие примечания с помощью абсолютного позиционирования. Если элемент спозиционировать абсолютно, не задавая конкретных координат, он удалится из того места, где он был, «зависнув» прямо над ним. Останется только пододвинуть его на поля. Колонки для этого не нужны.

Сайдноутами (англ. sidenote) мы называем примечания и заметки на полях

Ограничим ширину текста, например, 75%, а оставшееся место отдадим сайдноутам:

Сайдноутами (англ. sidenote) мы называем примечания и заметки на полях

<style>
  * { box-sizing: border-box }
  
  article {
    /* Задаём систему координат
    *  для абсолютного позиционирования
    *  сайдноутов */
    position: relative;
  }
  
  p,
  ul,
  ol {
    width: 75%;
    padding-right: 20px;
  }
  
  .sidenote {
    /* Задаём сайдноутам ширину, равную
    *  ширине поля, и позиционируем их
    *  по правому краю родителя */
    width: 25%;
    position: absolute;
    right: 0;
    /* Уменьшим кегль и подтолкнём сайдноут вниз,
    *  чтобы выровнять по базовой
    *  с основным текстом */
    font-size: .8em;
    margin-top: .0625em;
  }
  
  /* На мобильных экранах ставим всё в одну колонку */
  @media screen and (max-width: 761px) {
    p,
    ul,
    ol,
    .sidenote {
      width: auto;
      position: static;
    }
  }
</style>

<article>
  <p>
    One of the most distinctive features of Tufte’s style
    is his extensive use of sidenotes. Sidenotes are like footnotes,
    except they don’t force the reader to jump their eye
    to the bottom of the page, but instead display off
    to the side in the margin. Perhaps you have noticed their use
    in this document already. You are very astute.
  <p>

  <p class="sidenote">
    See
    <a href="https://edwardtufte.github.io/tufte-css/">
      Tufte CSS by Dave Liepmann
    </a>
  </p>

  <p>
    Sidenotes are a great example of the web not being like print.
    On sufficiently large viewports, Tufte CSS uses the margin for sidenotes,
    margin notes, and small figures. On smaller viewports, elements that would go
    in the margin are hidden until the user toggles them into view. The goal is
    to present related but not necessary information such as asides or citations
    as close as possible to the text that references them. At the same time,
    this secondary information should stay out of the way of the eye,
    not interfering with the progression of ideas in the main text.
  </p>
</article>

Результат:

One of the most distinctive features of Tufte’s style is his extensive use of sidenotes. Sidenotes are like footnotes, except they don’t force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. Perhaps you have noticed their use in this document already. You are very astute.Sidenotes are a great example of the web not being like print. On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. On smaller viewports, elements that would go in the margin are hidden until the user toggles them into view. The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them. At the same time, this secondary information should stay out of the way of the eye, not interfering with the progression of ideas in the main text.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы