更改分页符上的文档流以填充空间

Question

在打印时（或者，一般来说，在分页媒体上显示文档），是否可以重排文档元素，以便当某些元素（例如图像）因为不适合可用空间而转移到下一页时实际页面，后面的元素会被移动到实际页面的剩余空间吗？

我正在尝试实现与LaTeX Floats 类似（或相同）的效果，但仅使用 CSS。

为了说明这一点，假设我们有这种情况：

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        |  _________________  |
        | | Top of image A  | |
        |_|_________________|_|

         ---- page break -----
         _____________________
Page 2  | | Rest of image A | |
        | |_________________| |
        |                     |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |         ...         |
        |_____________________|

使用一些基本的 CSS（参见 this question），实现这一点没有问题：

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        |                     |
        |                     |
        |_____________________|

         ---- page break -----
         _____________________
Page 2  |  _________________  |
        | | Image A (whole) | |
        | |                 | |
        | |_________________| |
        |                     |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |         ...         |
        |_____________________|

但我真正需要的是这样的：

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |_____________________|

         ---- page break -----
         _____________________
Page 2  |  _________________  |
        | | Image A (whole) | |
        | |                 | |
        | |_________________| |
        |         ...         |
        |_____________________|

所以，基本上，我只想用image A 之后的元素填充实际页面上剩余的所有空间（当然，只有它们适合它）。

我正在做一些 CSS3 研究，想看看 Office 编辑器是否可以完全被 CSS 样式取代，所以我不需要支持该解决方案（即目前在某些浏览器中实现）。我只想知道它是否包含在任何 CSS 模块或构造中（即使它只是工作草案），所以我可以假设浏览器将来会支持它。

我已经在里面搜索过了

• CSS3 分页媒体，
• CSS3 区域 和
• 为分页媒体生成的 CSS3 内容

规格并没有发现任何东西，但我仍然有可能只是忽略了一些东西（或者根本不理解它），所以在谷歌搜索了两天之后，我认为是时候在这里问了 :-)

---

编辑： 再次说明：我不需要任何浏览器都支持该解决方案 现在，我需要知道是否有允许这样做的标准或规范（如果是，如何）。

Answer 1

这完全是在黑暗中刺伤，但它至少可以让你朝着正确的方向前进......

结合page(n) pseudo-element 选择器、float / float-modifier 属性以及可能的CSS4 parent selectors 可能会提供某种解决方案。

以下是一些行为示例：

/* CSS3 GCPM */
#image-a::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

/* CSS4 Parent Selector */
$#image-a ::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

这基本上表明如果 image-a 实际换行到第二页，则应该对其应用浮点数，将其发送到下一页的顶部。根据浏览器选择呈现的方式，您可能会得到您正在寻找的结果（希望如此）：

1. 检测到换行到第二页
2. page-break-before 属性强制 float 属性应用于整个元素（或者父选择器完成它的工作）
3. float 和 margin 属性将元素从文档流中取出，并允许其他内容占用它的空间

我知道这是一个真正的延伸并且不会起作用，但也许它会引发一个思路，让你想出一个更可靠的解决方案:)