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

Answer 1

我个人会使用带有网格的框架，例如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 示例）

这意味着，当您使用中等视口（或更大）的浏览器时，每个页面将占用屏幕 12 空间中的 6 个（即 50%），而当用户使用小屏幕时，页面将占用 12 个屏幕空间。 12 空间（即 100%） - 因此页面一层一层地布局。