是否可以使用 HTML 和 CSS 创建一个包含 HTML 和 CSS 的两列多页面布局,如本模型所示,其中内容自动从 1 → 2 → 3 → 4 → ... 流动?
我正在构建一个电子书阅读器/作者。本质上,布局类似于 Word 或 Pages 等桌面文字处理应用程序的布局:
我尝试了 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
最佳答案
检查一下,它对我有用:
#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
关于html - CSS:多列、多页布局,就像一本打开的书,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60544900/