html - 打印时向上或向下浮动 html 元素以避免空白

问题描述

我正在打印带有图像的 html 文档。图像总是按照它们在 html 文件中出现的顺序打印。当任何页面上的剩余空间太小而无法容纳下一个图像时，会创建一个非强制分页符，并且图像会移动到下一页的顶部，在前一页上留下一个可能很大的空白空间。

有没有办法避免这些空白？有没有办法将html中图像后面的段落拉到空白处？

这是一个最小的例子。使用 Safari 打印到 A4 时，第一页有很大的空白区域。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>

    <figure>
        <img src="https://live.staticflickr.com/5642/22589328394_62f81792b1_c_d.jpg" alt="An image" width="60%">
        <figcaption>CC BY 2.0 oatsy40@flickr</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet nisl purus in mollis nunc sed. Pellentesque id nibh tortor id aliquet. Proin nibh nisl condimentum id venenatis a condimentum. Non sodales neque sodales ut etiam sit amet. Consectetur libero id faucibus nisl tincidunt eget nullam. Turpis tincidunt id aliquet risus feugiat. Id neque aliquam vestibulum morbi. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ultrices eros in cursus turpis massa tincidunt dui ut. Posuere ac ut consequat semper viverra nam libero. Sit amet tellus cras adipiscing. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Eget sit amet tellus cras adipiscing.</p>

    </body>
</html>

标签： htmlcssimageprintingweasyprint

html - 打印时向上或向下浮动 html 元素以避免空白

问题描述

解决方案

推荐阅读