我有一个非常复杂的单页应用程序来管理数据。除其他事项外,它当然需要能够打印该数据。在大多数情况下,我掌握了从浏览器打印时实际有效和无效的方法,以及您可以使用 @page 指令在 CSS 中使用的技巧。
不过,上周我遇到了一个让我感到有点困惑的问题。我正在尝试将数据打印到卡片纸上——例如,在每页 2 列乘 4 行的卡片纸上打印姓名徽章。我正在尝试使用固定端 div 来执行此操作,其中 div 的 CSS 看起来像这样:
.badge {
display: inline-block;
width: 3.5in;
height: 2.5in;
}
它在屏幕上显示良好,但当我打印它时,每个徽章都在单独的一行上出现——div 似乎没有正确内联。边距很小,所以我认为不是问题所在。
我在这里不知所措。固定大小的内联 block 在打印时不起作用吗?如果相关的话,我正在使用 Chrome。我希望有可能在不诉诸于在服务器上将页面生成为 PDF 的情况下完成这项工作。
最佳答案
这应该有效:
<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 英寸。
关于css - 打印时内联 block div 是否有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28811236/