我的HTML产品表存在问题。
如果在页面上选择了足够的产品以达到第二页，则第二页的顶部会被新产品弄脏，而新产品的样式都搞砸了。
CSS我已经尝试过这个
@media print{
#packingPrint {
page-break-after: always;
}
}
div包含需要打印的信息。
<div style="page-break-after: always;">
<!--END: pagebreak-->
<section id="packingPrint" style="font-family:verdana,helvetica,sans-serif" ;>
<!------ START: Confirmation ------>
<!--START: order_details-->
<div class="customerInfoBlock" style="border-bottom: solid;border-width: 1px;">
<!--start customer info block-->
<div class="left-col">
<!--START: invoicelogo-->
<div class="invoice-logo"><img src="../[invoicelogo]" alt="[company]" /></div>
<!--END: invoicelogo-->
</div>
<!--end customer info block-->
<!--start invoice info block-->
<div class="right-col">
<div class="orderNumber">
<div class="label">Order Number #:</div>
<div class="text">[invoicenum_prefix][invoicenum]
<!--START: shipmentsuffix--><span style="display:none;">-[shipment_suffix]</span>
<!--END: shipmentsuffix-->
</div>
<div class="clear"></div>
<div class="label">Order Date:</div>
<div class="text">[odate_month]/[odate_day]/[odate_year]</div>
<div class="clear"></div>
</div>
</div>
<!--end invoice info block-->
<div class="clear"></div>
</div>
<div class="billingBlock">
<!--start billing block-->
<div class="left-col">
<p style="font-size:20px; text-decoration: underline;"><strong>SHIPPING ADDRESS</strong></p>
<p style="font-size:18px">[oshipzip]</p>
<div class="spacer"></div>
<p style="font-size:18px">[oshipfirstname] [oshiplastname]</p>
<!--START: oshipcompany-->
<p style="font-size:18px">[oshipcompany]</p>
<!--END: oshipcompany-->
<p style="font-size:18px">[oshipaddress]</p>
<!--START: oshipaddress2-->
<p style="font-size:18px">[oshipaddress2]</p>
<!--END: oshipaddress2-->
<p style="font-size:18px">[oshipcity]</p>
</div>
<!--end billing block-->
<!--start shipping block-->
<div class="right-col" style="max-width: 300px">
<div class="deliveryBox">
<div class="text"><span style="color: #ff0000;"><img src="/assets/images/shipping1.png" width="40" height="40" style="padding-right:5px; margin-bottom: -10px;">[oshipmethod]</span> </div>
</div>
<div class="spacer1">
<div class="text"><img src="/assets/images/Weight1.png" width="25" height="25" style="padding-right:5px;">Weight:[totalweight]kgs</div>
</div>
<div class="spacer1">
<div class="text">
<p style="font-size:15px"> <img src="/assets/images/email1.png" width="25" height="25" style="padding-right:5px;">[oemail]</p>
</div>
</div>
<div class="spacer1">
<div class="text">
<p style="font-size:15px"><img src="/assets/images/phone1.png" width="25" height="25" style="padding-right:5px;">[ophone]</p>
</div>
</div>
<div class="clear"></div>
</div>
<!--end shipping block-->
<div class="clear"></div>
</div>
<div class="shippingInfoBlock" style="width:100%;">
<!--START: shipping_info-->
<div class="invoiceTable">
<div class="titles2" style="padding-top: 15px;padding-bottom: 15px;">
<div class="invoice-qty">Qty</div>
<div class="invoice-loc">Loc</div>
<div class="invoice-items">Items</div>
<div class="invoice-ais">2loc</div>
<div class="invoice-cus">Stock</div>
<div class="invoice-id">Item ID</div>
<div class="clear"></div>
</div>
<!--START: items-->
<div class="row" style="border-bottom: solid;border-width: 1px;padding-top: 15px;padding-bottom: 15px;">
<div class="invoice-qty">[numitems]</div>
<div class="invoice-loc">[warehouse_location]</div>
<div class="invoice-items">[itemname]</div>
<!--START: warehouse_location-->
<div class="invoice-ais" style="text-align:center;">[warehouse_aisle]</div>
<div class="invoice-cus" style="text-align:center;">[warehouse_custom]</div>
<div class="invoice-id" style="text-align:center;">[id]</div>
<div class="clear"></div>
<!--END: warehouse_location-->
</div>
</div>
<!--END: items-->
<div class="orderDetailsBlock">
<div class="left-col">
<!--START: ocomment-->
<div class="ocomment" >
<strong>Order Comments:</strong>
<p class="oCommenting"><strong><span class="commentsOrder" style="color: #ff0000;">[ocomment]</span></strong></p>
</div>
<!--END: ocomment-->
</div>
</div>
<div class="clear"></div>
</div>
<p id="imagePick"><img src="https://www.plasticpipeshop.co.uk/assets/images/Picked.png" alt="Picked By" align="right" width="250" height="150" /> </p>
<!------ END: Confirmation ------>
<div class="clear"></div>
</section>
</div>
