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

Question

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

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

• 两个相邻的页面填满屏幕（如果您打开一本书，则为“左”和“右”页）
• 下面的两页，垂直滚动，等等。（想象一下翻一页书）
• 文本自动从一页流到下一页 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

标签： htmlcsscss-multicolumn-layout

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