用于印刷媒体的 CSS：具有简单算术布局不精确的 Flexbox

问题描述

我们正在设计一个生成标签纸的系统，该系统输出 HTML/CSS 文件，然后将这些文件打印在匹配的标签纸上。

这个问题本质上涉及一些简单的算术（加法和乘法），将标签网格放置在页面上，并带有相应的边距和偏移量。

最小的例子

假设我们有一个尺寸为 21.2x45.7 毫米的 4x12 标签网格的最小示例：

这是打印 CSS：

@page {
  /*size: A4;*/
  size: 210mm 297mm;
  margin-left: 9.9mm;
  margin-right: 10.1mm;
  margin-top: 20.7mm;
  margin-bottom: 21.9mm;
}


html {
  -webkit-print-color-adjust: exact;
}

body {
    margin: 0px;
}

#content {
  display: flex;
  column-gap: 2.4mm;
  flex-wrap: wrap;

}

.label {
  width: 45.7mm;
  height: 21.2mm;
}

这是（无聊而冗长的）对应的 HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="print.css">
</head>
<body>
    <div id="content">
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: silver;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
        <div class="label" style="background: gold;"></div>
    </div>
</body>
</html>

在这种情况下，页面宽度为 210 毫米，这与 4 label 行的长度完全匹配：

9.9 (left margin) + 4*45.7 (label width) + 3*2.4 (column gap) + 10.1 (right margin) = 210

然而，如果在 Firefox 或 Chrome 网络浏览器中打开上述内容然后打印（使用默认边距和 100% 缩放），每行仅适合 3 { {1}} label。

问题

是否有一些元素占用了我们没有考虑的空间？
或者这是与布局引擎的数字精度相关的固有限制？
有没有办法修复这个代码，所以布局是准确的？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-print flexbox html

用于印刷媒体的 CSS：具有简单算术布局不精确的 Flexbox

问题描述

最小的例子

问题

解决方法

相关问答