打印时上下浮动 html 个元素以避免空白 space
Float html elements up or down while printing to avoid blank space
我正在打印 html 个带图像的文档。图像总是按照它们在 html 文件中出现的顺序打印。当任何页面上剩余的 space 太小而无法容纳下一张图片时，就会创建一个非强制分页符，并且图片会移动到下一页的顶部，留下一个可能很大的空白 space 上一页。
有没有办法避免这些空白 space？有没有办法把html中图片后面的段落拉到空白space中？
这是一个最小的例子。使用 Safari 打印到 A4 时，第一页有一大片空白 space。
<!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>
该功能目前不存在（2020 年 4 月）。有一个 Public Working Draft on Page Floats 正好包含此功能。
我正在打印 html 个带图像的文档。图像总是按照它们在 html 文件中出现的顺序打印。当任何页面上剩余的 space 太小而无法容纳下一张图片时，就会创建一个非强制分页符，并且图片会移动到下一页的顶部，留下一个可能很大的空白 space 上一页。
有没有办法避免这些空白 space？有没有办法把html中图片后面的段落拉到空白space中？
这是一个最小的例子。使用 Safari 打印到 A4 时，第一页有一大片空白 space。
<!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>
该功能目前不存在（2020 年 4 月）。有一个 Public Working Draft on Page Floats 正好包含此功能。