打印时内联块 div 是否有效？

Question

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

上周我遇到了一个问题，但我发现它有点令人费解。我正在尝试将数据打印到卡片纸上——例如，在每页 2 列乘 4 行的卡片纸上打印姓名徽章。我正在尝试使用固定端 divs 来做到这一点，其中 div 的 CSS 看起来像这样：

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

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

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

Answer 1

数量取决于您的屏幕尺寸。所以当屏幕分辨率改变或打印页面有另一个尺寸时，行数和列数。所以我建议您使用 % 作为单位而不是 in 来调整宽度和高度的大小，或者为每个分辨率制作 css 样式。或者您可以使用 HTML table tag.

因为 inline-block 只是像对待其他元素一样对待元素 "inline elements" 并允许使用块属性。它不精确有多少列和行。

Answer 2

这应该有效：

<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.5in。

打印时内联块 div 是否有效？

Do inline-block divs work when printing?

css

google-chrome

browser

printing