html - 新页面中的动态内容

Question

我遇到了一个问题，我不知道是否真的可以用纯 HTML 和 CSS 来解决它。

我想动态加载内容，它的数量可以变化。当有超过 4 个元素时，接下来的 4 个应该在新页面上。我可以在我正在加载内容的页面之外创建一个新页面吗？

* {
  margin: 0;
  padding: 0;
}
body {
  background: #262626;
}
page {
  display: block;
  position: relative;
  width: 210mm;
  height: 297mm;
  margin: 20px auto;
  margin-bottom: 0.5cm;
  page-break-after: always;
  background: white;
  padding: 50px;
  box-sizing: border-box;
}
.block {
  background: gray;
  width: 100%;
  height: 21%;
  margin-bottom: 4%;
  opacity: 0.7;
  text-align: center;
}
.block:nth-child(4n+4) {
  page-break-after: always;
}

<page size="a4">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
</page>

Answer 1

是否可以重新构建您的 html 一些？，那么这可能是一个没有使用脚本的开始(稍微改变了您的大小以使其更容易看到)。

* {
  margin: 0;
  padding: 0;
}
body {
  background: #333;
}
.block {
  position: relative;
  background: #999;
  height: 62.37mm;
  width: 105mm;
  margin: 0 auto;
  margin-top: 11.88mm;
  text-align: center;
}
.block:nth-child(4n+1):before {
  content: "";
  z-index: -1;
  position: absolute;
  background: #fff;
  top: -5.94mm;
  left: -10mm;
  width: 125mm;
  height: 297mm; 
}
.block:nth-child(4n+4) {
  page-break-after: always;
}
.block:nth-child(4n+5) {
  margin-top: 80px;
}

<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>