Cssの印刷制御ページ区切りとページ区切り前以外

Question

私はラベルのAveryシートにバーコードを印刷するWebインターフェイスを設計しています。もっと重要なのは、ラベルの各セットが別のページに染み込むことなく、自分のページに存在することを確認するにはどうしたらいいですか？ ？

私の現在のソリューションでは、ラベルに一致するようにサイズが設定された各ページのテーブルを使用しています（できるだけ多くのページを印刷すると、最終的にラベルからバーコードが外れる）バーコードの下に情報を追加すると、バンプが悪化します。私はpage-break-afterとpage-break-beforeを調べましたが、それらを設定することは効果がないようです。

ありがとうございます！

Answer 1

は、あなたが任意のコードを提供していなかったにもかかわらず、私はそれで刺してみよう：

まず、SelectivizrとjQueryを取得するIEは、CSS3のものを読むことができるように、我々は必要です：

• Selectivizr：http://selectivizr.com/
• のjQuery：
  01：http://jquery.com/

ここでは、私はすぐに設定HTMLです

<div id="wrapper"> 
     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 

     <div class="barcode"> 
      <img src="/path/to/barcodes/1.jpg" /> 
      <span class="descr">Some descriptive text</span> 
     </div> 
    </div> 

そして、ここで必要なCSSです：

body { margin: 0; padding: 0; } 
    #wrapper { width: 100%; display: block; } 
    .barcode { width: 30%; float: left; margin-bottom: 50px; } 
    .barcode img { display: block; width: 150px; height: 150px; margin: 0 auto 10px auto; } /* set to whatever the barcodes will be in size */ 
    .barcode span { display: block; text-align: center; } 
    #wrapper div.barcode:nth-child(3n+4) { clear: left; } 
    #wrapper div.barcode:nth-child(6n+6) { page-break-after: always; background: #000; } /* Use 9n+9 to page break after each 9th item. */ 

はそれぞれ6位バーコードの後に​​この意志の改ページ。私があなたの質問を正しく理解していれば、これは「常にうまくいくはずです」。私はテストのために持っているシステムの量が制限されたんだ。もちろん、

... :)