Question

这是我的页面的概述

.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的内容中添加某些样式。

Answer 1

＆＃13;

.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;}

＆＃13;

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

＆＃13;

你可以用简单的CSS做到这一点。在一个DIV中包装所有div。现在使用css :first-child和:last-child，您可以提供所需的属性。

Answer 2

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

＆＃13;

@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;
        }

＆＃13;

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

＆＃13;

插入分页符时获取特定的CSS

2 个答案: