15

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

我正在尝试实现与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（参见这个问题），实现这一点没有问题：

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 内容

规范并一无所获，但仍有机会我只是忽略了某些东西（或根本不理解），所以经过两天的谷歌搜索，我认为是时候在这里问了:-)

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

4

1 回答 1

4

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

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

以下是一些行为示例：

/* 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. floatand属性将margin元素从文档流中取出并允许其他内容占用它的空间

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

于 2012-06-07T22:50:38.313 回答