css - 打印时内联 block div 是否有效？

Question

我有一个非常复杂的单页应用程序来管理数据。除其他事项外，它当然需要能够打印该数据。在大多数情况下，我掌握了从浏览器打印时实际有效和无效的方法，以及您可以使用 @page 指令在 CSS 中使用的技巧。

不过，上周我遇到了一个让我感到有点困惑的问题。我正在尝试将数据打印到卡片纸上——例如，在每页 2 列乘 4 行的卡片纸上打印姓名徽章。我正在尝试使用固定端 div 来执行此操作，其中 div 的 CSS 看起来像这样:

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

它在屏幕上显示良好，但当我打印它时，每个徽章都在单独的一行上出现——div 似乎没有正确内联。边距很小，所以我认为不是问题所在。

我在这里不知所措。固定大小的内联 block 在打印时不起作用吗？如果相关的话，我正在使用 Chrome。我希望有可能在不诉诸于在服务器上将页面生成为 PDF 的情况下完成这项工作。

Answer 1

这应该有效:

<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 英寸宽的容器 div 可确保您有足够的宽度并排放置两个徽章。此外，徽章 div 之间没有换行符，因为换行符会变成空格，这会阻止徽章彼此相邻。最后，我在徽章 CSS 中添加了 box-sizing: border-box 以确保在添加边框或填充时宽度不会超过 3.5 英寸。