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区域和
Page3媒体的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实际上包装到第二页上，则应该将float应用于它，将其发送到下一页的顶部。根据浏览器选择渲染的方式，您可能会得到您正在寻找的结果（希望如此）：

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

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

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

1 个答案: