Question

我有一个包含大约1000个div的HTML页面。

在这种情况下，我想做的是，当用户要打印页面时，将其中两个放在一个A4页面上，类似“适合页面”功能。

如果有关系，则页面是使用PHP生成的。

有人领导我该怎么做吗？

谢谢。

Answer 1

尝试一下。 300ppi中A4的大小为2480 x 3508 使用CSS主div

.main{
display grid;grid-gap:10px;
grid-template-columns:repeat(auto-fill,minmax(1734px,1fr);
/* 1734 = 3508/2 -20px for grid-gap */
}

让我知道它有效的天气。它只是基于理论。

Answer 2

我假设2个div的内容始终适合A4页面，而无需更改字体大小。

基于CSS to set A4 paper size。

添加了CSS，以每2个div添加分页符。

我曾经在Firefox中打印到pdf文件，这是一种免费的免费打印机检查布局的方法。

<!DOCTYPE html>
<html>
<head>
<style>
/* 
based on 
https://stackoverflow.com/a/30345808/1692270 *

then added css to add page break every 2 items
*/

/*ie last in every group of 2*/
/*page break every 2nd item */
div:nth-of-type(2n-0) {
    background: red;
    page-break-after: always;
}
/*ie 1st in every group of 2*/
div:nth-of-type(2n-1) {
    background: blue;
}

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

</style>
</head>
<body>

<div>The first div.</div>
<div>The second div.<br>more stuff here</div>
<div>The third div.</div>
<div>The fourth div.</div>
<div>The fifth div.</div>
<div>The sixth div.</div>
<div>The seventh div.</div>
<div>The eight div.</div>
<div>The ninth div.</div>
<div>The 10th div.</div>
<div>The 11th div.</div>
<div>The 12 div.</div>
<div>The 13 div.</div>
<div>The 14 div.</div>
<div>The 15 div.</div>
<div>The 16th div.</div>
<div>The 17th div.</div>
</body>
</html>

在打印时如何在一个A4页面上放置两个HTML div？

2 个答案: