当打印(或通常在分页媒体上显示文档)时,是否可以回流文档元素,以便当某些元素(例如图像)移动到下一页时,因为它不适合实际页面上的可用空间,跟随它的元素将被移动到实际页面的剩余空间？
我试图实现类似于(或相同)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) | |
| | | |
| |_________________| |
| ... |
|_____________________|
所以,基本上,我只想填写剩下的实际页面上剩下的所有剩余空间,其中的元素跟随图像A(当然,只有当它们适合它时).
我正在做一些CSS3研究,并希望看到Office编辑器是否可以被CSS样式完全替代,所以我不需要支持解决方案(即在这个时候在一些浏览器中实现).我想知道的是,它是否涵盖在任何CSS模块或构造中(即使它只是工作草案),所以我可以假设浏览器将来会支持它.
我已经搜索过了
> CSS3分页媒体,
> CSS3区域和
> CSS3生成的分页式媒体内容
规格并没有发现,但还是有一个机会,我只是忽略了一些东西(或根本不了解),所以经过两天的Google搜索,我认为是时候在这里问:-)
解决方法
这是在黑暗中的总刺,但它可能至少让你在正确的方向…
结合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实际上包裹在第二个页面上,那么应该应用浮点数,将其发送到下一页的顶部.根据浏览器选择呈现的方式,您可能会获得所需的结果(希望)：
>检测到卷入第二页
> page-break-before属性强制float属性应用于整个元素(或父选择器的作用)
> float和margin属性使元素超出了文档流,允许其他内容占用空间
我知道这是一个真正的伸展,不会奏效,但也许会触发一条思路,让你想出一个更加坚实的解决方案:)
