Question

我遇到了一个问题而且我不知道是否有可能用纯HTML和HTML修复它。 CSS。

我想动态加载内容，其数量可能会有所不同。当有超过4个项目时，接下来的4个应该在新页面上。我可以在我加载内容的那个之外创建一个新页面吗？

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您必须使用jQuery或javascript来创建新元素。您可能希望创建一个新链接，并使用jquery创建的新内容重定向到该链接。

Answer 2

是否有可能重新构建你的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>

新页面中的动态内容

2 个答案: