Css 打印时内联块div工作吗？

我有一个非常复杂的单页应用程序来管理数据。当然，它还需要能够打印这些数据。在很大程度上，我掌握了在从浏览器打印时，什么实际起作用，什么实际不起作用，以及使用@page指令可以在CSS中使用的技巧

上周我遇到了一个问题，我觉得有点神秘。我正在尝试将数据打印到cardstock表单上——例如，在cardstock上打印姓名徽章，每页可能有2列4行。我尝试使用固定边div来实现这一点，其中div的CSS如下所示：

.badge {
  display: inline-block;
  width: 3.5in;
  height: 2.5in;
}

这在屏幕上显示得很好，但当我去打印它时，它会在单独的一行上显示每个徽章——div似乎没有正确地内联。利润率很低，所以我认为这不是问题所在

---

我在这里不知所措。打印时固定大小的内联块不起作用吗？如果相关的话，我正在使用Chrome。我希望这是有可能的，使这项工作没有，例如，诉诸生成的网页作为PDF在服务器上。

的数量取决于您的屏幕大小。 因此，当屏幕分辨率改变或打印页面有另一个大小时，行数和列数也会改变。 因此，我建议您使用

%

作为单位，而不是

中的
来重新调整宽度和高度的大小，或者为每个分辨率制作css样式。或者您可以使用
HTML表标记

因为
内联块
只是将元素与其他“内联元素”一样对待，并允许使用块属性。它没有精确的列数和行数。
这应该可以：

<style>
  .container {
    width: 7in; /* This guarantees there will be enough room for 2 badges side-by-side */
  }

  .badge {
    box-sizing: border-box; /* You only need this if you add padding or borders */
    display: inline-block;
    width: 3.5in;
    height: 2.5in;
  }
</style>

<div class="container">
  <div class="badge">
    Badge 1
  </div><div class="badge"> <!-- DO NOT put line breaks between the badge divs! -->
    Badge 2
  </div><div class="badge">
    Badge 3
  </div><div class="badge">
    Badge 4
  </div>
</div>


.集装箱{
宽度：7英寸；/*这保证有足够的空间并排放置两个徽章*/
}
.徽章{
框大小：边框框；/*只有在添加填充或边框时才需要此选项*/
显示：内联块；
宽度：3.5英寸；
高度：2.5英寸；
}
徽章1
徽章2
徽章3
徽章4

简言之，7英寸宽的容器分区保证您有足够的宽度来并排放置两个徽章。此外，徽章div之间没有换行符，因为换行符会变成空格，这会阻止徽章彼此相邻。最后，我在徽章CSS中添加了
框大小：边框框
，以确保如果添加边框或填充，宽度不会超过3.5英寸。
关键是这是用于在表单库存上打印：大小是硬编码的，物理上。表标记不适合这种情况，我只关心打印单个单元格，而实际上不关心行/列。