html css page break

* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 10px;

}
div.row { 
page-break-after: always; 
}

<body>
<div<div class="row">
<div class="column" >
<p><h2>101</h2>
<img src="http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/33.64188,-84.50077/7?mapSize=500,500&pp=33.64188,-84.50077;21;1&pp=33.76768,-84.36031;;2&key=ArJkybJp6LvcJs7su6sKIQMBnwYngXlhGIjE5aWRApleSq6DkWzGNm5j80Lb-WZt">
<h6>YES/NO 1. x? </br>
YES/NO 2. x?</br>
YES/NO 3. x?</br>
YES/NO 4. x?</br>
YES/NO 5. x?</br>
YES/NO 6. x?</h6><h5>________________________________________________________________________</br>
Signature                                       Date</br></h5>
<h5>________________________________________________________________________</br>
Signature                                       Date,</br></h5>
<h5>________________________________________________________________________</br>
Signature                                       Date</br></h5>
<h5>________________________________________________________________________</br>
Signature                                       Date</br></h5></p>
</div>
<div class="column" style="width: 1000; align: top;" >
<p>
<table>
<tr><th>Stop Number</th><th>Address</th><th>Zip</th><th>Arrival</th>
<tr>
<td>0</td>
<td>11111</td>
<td>22222</td><td>2:30</td></tr>
<tr><td>1</td>
<td>11111</td>
<td>22222</td>
<td>4:00</td></tr>
</table>
</p>
</div>
</div>
<p style="page-break-after: always;">&nbsp;</p>
<div class="row">
<div class="column" >
<p><h2>02</h2>
<img src="http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/33.64188,-84.50077/7?mapSize=500,500&pp=33.64188,-84.50077;21;1&pp=33.76768,-84.36031;;2&key=ArJkybJp6LvcJs7su6sKIQMBnwYngXlhGIjE5aWRApleSq6DkWzGNm5j80Lb-WZt">
<h6>YES/NO 1. x? </br>
YES/NO 2. x?</br>
YES/NO 3. x?</br>
YES/NO 4. x?</br>
YES/NO 5. x?</br>
YES/NO 6. x?</h6><h5>________________________________________________________________________</br>
Signature                                       Date</br></h5>
<h5>________________________________________________________________________</br>
Signature                                       Date,</br></h5>
<h5>________________________________________________________________________</br>
Signature                                       Date</br></h5>
<h5>________________________________________________________________________</br>
Signature                                       Date</br></h5></p>
</div>
<div class="column" >
<p>
<table>
<tr><th>Stop Number</th><th>Address</th><th>Zip</th><th>Arrival</th>
<tr>
<td>0</td>
<td>11111</td>
<td>22222</td><td>2:30</td></tr>
<tr><td>1</td>
<td>11111</td>
<td>22222</td>
<td>4:00</td></tr>
</table>
</p>
</div>
</div>
<p style="page-break-after: always;">&nbsp;</p>
</body>

我有一个包含两列的页面，我需要在一段代码之后使用分页符才能在下一页上打印其他两列。但我只能让列一个接一个地并排出现。它们看起来很棒。我只需要分页符，我已经尝试了两个"页面"之间的空div 和随附的 CSS：

.CSS

div.row { 
page-break-after: always;

.HTML

<div class="pagebreak"> </div>

我也试过

<p style="page-break-after: always;">&nbsp;</p>

但是在第 2 列之后没有分页符，而是我最终有四列，只有一页。

我错过了什么？

此属性适用于生成框的块元素。它不适用于不会生成框的空div。尝试在你身上添加一些内容 .rowdiv

相关内容

最新更新

热门标签：