2

这是我的页面的轮廓

.section
{
  height: 50px;
  width:50px;
  border:1px solid black;
  /*border-bottom:5px solid gray;*/
  margin:10px;
	margin-bottom:200px;
	page-break-inside: avoid;	
}
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>

我期望在这里实现的是，每当我们打印此页面时，每页上的第一个框和最后一个框都应该有一个灰色边框。

如果有人以前遇到过这种情况，请帮忙。

目前，我正在搜索一个 JavaScript 触发器，它会在分页时触发并帮助我访问页面上的第一个元素。但是，如果有人可以建议其他搜索线，那也会有帮助。

更新 1：此内容是动态生成的。盒子的大小可能会有所不同。所以我不能确定每页会显示多少个框。

更新 2：我考虑过页眉和页脚。但这不会完全有帮助。因为我必须在第一个和最后一个 DIV 的内容中添加某些样式。

4

2 回答 2

2 

.section
{
  height: 50px;
  width:50px;
  border:1px solid black;
  /*border-bottom:5px solid gray;*/
  margin:10px;
	margin-bottom:200px;
	page-break-inside: avoid;	
}
div.wrapper .section:first-child {border-bottom:5px solid gray;}
div.wrapper .section:last-child {border-bottom:5px solid gray;}
 
<div class="wrapper">
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
</div>

您可以使用简单的 CSS 来完成。将所有 div 包装在一个 DIV 中。现在使用 css :first-child，:last-child您可以提供所需的属性。

于 2018-03-23T16:47:14.167 回答
0

当使用 html 标记中的空元素打印页面时，您可以插入自定义分页符。然后简单地给它之前和之后的元素一个特殊的类作为目标。

@media all {
  .page-break {
    display: none;
  }
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  .section.before {
    border: 5px solid blue;
  }
  
  .section.after {
    border: 5px solid red;
  }
}

.section {
            height: 50px;
            width: 50px;
            border: 1px solid black;
            margin: 10px;
            margin-bottom: 200px;
            page-break-inside: avoid;
        }
<div class="wrapper">
  <div class='section'></div>
  <div class='section before'></div>
  <div class="page-break"></div>
  <div class='section after'></div>
  <div class='section'></div>
  <div class='section before'></div>
  <div class="page-break"></div>
  <div class='section after'></div>
  <div class='section'></div>
</div>

于 2018-03-23T17:07:12.820 回答