CSS: многостолбцовый, многостраничный макет как открытая книга - PullRequest
Новая
       4

CSS: многостолбцовый, многостраничный макет как открытая книга

0 голосов
/ 05 марта 2020

Можно ли создать многостраничный макет с двумя столбцами с HTML и CSS, как показано в этом макете, где содержимое автоматически перетекает из 1 → 2 → 3 → 4 →…?

book layout

Я создаю программу чтения / записи электронных книг. По сути, макет похож на настольное приложение для обработки текстов, такое как Word или Pages:

  • Две страницы рядом друг с другом, заполняющие экран («левая» и «правая» страницы, если вы открываете книгу )
  • Следующие две страницы ниже, прокрутка по вертикали и т. Д. c. (представьте, что переворачиваете страницу в книге)
  • Текст автоматически перемещается с одной страницы на следующую 1 → 2 → 3 → 4 → ...

Я экспериментировал с CSS Многостолбцовый макетный модуль ¹ . Получить два столбца просто, но я не мог понять, как «разбить» на высоте области просмотра на несколько «двухколоночных» макетов, по одному для каждого набора «левых и правых» страниц.

РАЗЪЯСНЕНИЕ:

Содержание по сути одно большое <div contenteditable="true">. Его содержимое должно автоматически перемещаться по страницам. 

<div id="bookeditor" contenteditable="true">
    Book contents go here...
    Wrap from page to page, from row to row...
</div>

1: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

1 Ответ

0 голосов
/ 05 марта 2020

Я бы лично использовал каркас с сеткой, такой как https://getbootstrap.com/docs/4.4/layout/grid/ или https://get.foundation/sites/docs-v5/components/grid.html, и создал бы строки, чтобы на каждой странице было CSS классов col-md-6 col-sm-12 ( Bootstrap пример)

Это означает, что когда вы находитесь в браузере со средним окном просмотра (или больше), каждая страница занимает 6 из 12 места (то есть 50%) экрана, и когда пользователь на маленьком экране страница будет занимать 12 из 12 места (то есть 100%) - поэтому страницы располагаются одна над другой.

...