Question

首先，我想说明一点，我理解html不是最适合打印的，但是对于我需要它，它可以正常工作。话虽如此，我想设置一个具有绝对定位的页面，该页面将重复自身并在每个页面后有一个分页符。我已经看过如果你不使用绝对定位如何添加分页符，但你如何使用绝对定位呢？

以下是我的非工作代码：

div {
  position: absolute;
}
div#valueLocation {
  left: 20px;
  top: 305px;
}
.page-break {
  clear: left;
  display:block;
  page-break-after:always;
}

<div id="valueLocation">Name1</div>
<p style="page-break-after: always;"></p>
<div id="valueLocation">Name2</div>
<p style="page-break-after: always;"></p>
<div id="valueLocation">Name3</div>

上述代码导致名称1,2和3重叠。如何从它自己的页面重新启动？如果不可能，我怎样才能在页面上放置多个元素，以便在特定位置定位，以便我可以分页？我再次理解你不能像素完美保证打印的内容但是根据我的需要，上面的效果非常好。

PS：我还包括我使用的样式以及内联样式，以显示我尝试的一些不同选项。

Answer 1

它们重叠的原因是因为它们都具有相同的ID。你给这三个名字命名：

div#valueLocation
{
    left: 20px;
    top: 305px;
}

造型设定了它们的位置，因此它们都出现在同一个位置（左起20px，顶起305px）。它与您的分页符无关。

Answer 2

如果您想获得所需的结果，则必须使用JavaScript来计算位置并动态应用它。或者如果您仍然需要使用CSS，那么这里是一种方式，但不是建议方式。

您可以nth-child属性来定位元素。

 div#valueLocation
{
    left: 20px;
    top: 305px;
}
div#valueLocation:nth-child(2)
{
   top: 350px;
}
div#valueLocation:nth-child(3)
{
   top: 400px;
}

如上所述，您刚刚创建了10个元素并控制该循环不超过10个。

DEMO

Answer 3

这里，名称1,2和3是重叠的，因为position: absolute相对于具有position: relative的父元素，如果没有，则是根元素。在您的情况下，所有都将引用根元素，即您的案例中的body。所以，都是重叠的。

要解决此问题，您必须为所有div提供不同的样式。您可以对值进行硬编码并使其有效。

如另一个答案中所述，您可以使用此方法。但是你应该在HTML中只使用一次id。请改用class：

＆＃13;

div.valueLocation {
  left: 20px;
  top: 305px;
}

div.valueLocation:nth-child(2) {
  top: 350px; // you have to add the height of the first child and give top for the second
}

div.valueLocation:nth-child(3) {
  top: 400px; // add heights of 1st and 2nd accordingly for 3rd as position: absolute is relative to the body.
}

<body>
  <div class="valueLocation">Name1</div>
  <p style="page-break-after: always;"></p>
  <div class"valueLocation">Name2</div>
  <p style="page-break-after: always;"></p>
  <div class="valueLocation">Name3</div>
</body>

＆＃13;

Answer 4

不幸的是，仅使用html / css是不可能的。

如何用绝对定位循环css？

4 个答案: