html - CSS:多列、多页布局，就像一本打开的书

Question

是否可以使用 HTML 和 CSS 创建一个包含 HTML 和 CSS 的两列多页面布局，如本模型所示，其中内容自动从 1 → 2 → 3 → 4 → ... 流动？



我正在构建一个电子书阅读器/作者。本质上，布局类似于 Word 或 Pages 等桌面文字处理应用程序的布局:

两页并排填满屏幕(如果您打开一本书，则为“左”和“右”页)

下面接下来的两页，垂直滚动，等等(想象在书中翻页)

文本自动从一页到下一页 1 → 2 → 3 → 4 → ...

我尝试了 CSS 多列布局模块 ¹ .获得两列是直截了当的，但我无法弄清楚如何在视口(viewport)高度“分解”为多个“两列”布局，每组“左右”页面一个。

澄清:

内容本质上是一大片 <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

Answer 1

检查一下，它对我有用:

#bookeditor{
  column-width: 200px;
  width: 450px;// pick your size
}

<div id="bookeditor">
    YOUR 
    CONTENT 
    HERE 
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns