Question

我有一个非常复杂的单页面应用程序来管理数据。除此之外，它当然需要能够打印该数据。在大多数情况下，我掌握了从浏览器打印时实际工作和实际工作的内容，以及使用@page指令在CSS中使用的技巧。

上周我遇到了一个问题，我发现有点神秘。我正在尝试将数据打印到卡片纸上 - 例如，在卡片纸上打印名称徽章，每页可能有2列4行。我正在尝试使用固定端div，其中div的CSS看起来像这样：

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

这在屏幕上显示得很好，但是当我去打印它时，每个徽章都出现在另一条线上 - 这些div似乎没有正确内联。边距很小，所以我不会认为就是问题。

我在这里不知所措。打印时，固定大小的内联块是否不起作用？我正在使用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英寸。

Answer 2

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

因为inline-block只是将元素视为其他“内联元素”，并允许使用块属性。它不精确列数和行数。

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

2 个答案: