因此,我正在尝试构建一个网站,让用户可以下载打印输出的PDF文件。我在另一个线程中建议创建一个“新”页面,在其中放置我想要的信息,然后从中打印出“Print to PDF”,因为这是将内容转换为PDF的最简单方式。溢出时将内容移动到另一个div
因此,我制作了一个网格,其网格正好是A4纸的宽度和高度。所以如果打印,内容应该完全适合。
但是,我现在的问题是,网格内的内容会根据人们作为输入而改变。
所以现在我可以有以下情况:
CSS:
<style>
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr;
width: 21cm;
height: 29.7cm;
border: 1px red solid;
align-content: start;
grid-row-gap: 10px;
background: black;
}
.teams {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"teamNumber roundScore";
background: #ffffff;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
.teamMember {
border-bottom: 2px #474340 solid;
padding: 5px 0px 5px 5px;
margin: 5px;
}
.teamNumber {
grid-area: teamNumber;
text-align: left;
grid-column: 1/-1;
padding-left: 5px;
justify-self: start;
}
</style>
HTML:
<div class="grid">
<div class="teams">
<p class="teamNumber">Team 1</p>
<div class="teamMember">1.</div>
<div class="teamMember">2.</div>
<div class="teamMember">3.</div>
<div class="teamMember">4.</div>
<div class="teamMember">5.</div>
<div class="teamMember">6.</div>
<div class="teamMember">7.</div>
</div>
<div class="teams">
<p class="teamNumber">Team 2</p>
<div class="teamMember">1.</div>
<div class="teamMember">2.</div>
<div class="teamMember">3.</div>
<div class="teamMember">4.</div>
<div class="teamMember">5.</div>
<div class="teamMember">6.</div>
<div class="teamMember">7.</div>
<div class="teamMember">8.</div>
<div class="teamMember">9.</div>
<div class="teamMember">10.</div>
</div>
<div class="teams">
<p class="teamNumber">Team 3</p>
<div class="teamMember">1.</div>
<div class="teamMember">2.</div>
<div class="teamMember">3.</div>
<div class="teamMember">4.</div>
<div class="teamMember">5.</div>
<div class="teamMember">6.</div>
<div class="teamMember">7.</div>
<div class="teamMember">8.</div>
<div class="teamMember">9.</div>
<div class="teamMember">10.</div>
<div class="teamMember">11.</div>
<div class="teamMember">12.</div>
<div class="teamMember">13.</div>
</div>
<div class="teams">
<p class="teamNumber">Team 4</p>
<div class="teamMember">1.</div>
<div class="teamMember">2.</div>
<div class="teamMember">3.</div>
<div class="teamMember">4.</div>
<div class="teamMember">5.</div>
<div class="teamMember">6.</div>
<div class="teamMember">7.</div>
<div class="teamMember">8.</div>
<div class="teamMember">9.</div>
<div class="teamMember">10.</div>
</div>
<div class="teams">
<p class="teamNumber">Team 5</p>
<div class="teamMember">1.</div>
<div class="teamMember">2.</div>
<div class="teamMember">3.</div>
<div class="teamMember">4.</div>
<div class="teamMember">5.</div>
<div class="teamMember">6.</div>
<div class="teamMember">7.</div>
<div class="teamMember">8.</div>
<div class="teamMember">9.</div>
<div class="teamMember">10.</div>
</div>
</div>
的jsfiddle: https://jsfiddle.net/kfeer7f8/
让这个页面之前,所以一个人告诉我的系统/网站应该有5支球队,50人,然后将这些人分成5支球队。正如你可以看到结果一样,至少从我在这个例子中使用的格式来看,一切都按照它应该的方式排列,但是最后一支队伍溢出了A4网格的尺寸。 显然这是随机的。有时候也许只有2个团队和20个人可以很容易地适应这个网格。但有时它甚至可能比这更使得溢出更糟。
所以我的问题是:是否有某种方式,通过javascript/jquery或其他任何地方,我可以告诉它把/继续团队到另一个网格/ A4纸如果它导致前网格溢出?
获取'A4'纸张的默认高度,然后使用'jQuery',检查'teams'类容器的偏移值并相应地移动它们。 – Shiladitya