打印CSS - 避免切割DIV的

Question

我正在開發一個生成條形碼的應用程序，我想打印它們，但條形碼div在某些頁面上被切割。

CSS：

<style type="text/css"> 
    * { 
     margin:0px; 
    } 
    #cod { 
     width: 180px; 
     height: 150px; 
     padding: 10px; 
     margin: 10px; 
     float: left; 
     border: solid black 1px; 
     text-align: center; 
     display: block; 
    } 

</style> 

代碼：

<? foreach ($this->ouvintes as $ouvinte): ?> 
    <div id="cod"> 
     <p><?= $ouvinte->nome ?></p> 
     <p><?= $ouvinte->instituicao ?></p> 
     <p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p> 
     <p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p> 
    </div> 
<? endforeach; ?> 

有誰知道我怎麼能避免這種切？

感謝

Answer 1

如何嘗試page-break-after/page-break-before CSS屬性？

你可以設置它每9個條形碼這樣的後打破：

<? 
$i = 0; 
foreach ($this->ouvintes as $ouvinte): 
    $i++; 
    $pageBreakStyle = ($i % 9 == 0) ? ' style="page-break-after:always"' : ''; 
?> 
    <div id="cod"<?= $pageBreakStyle ?>> 
     <p><?= $ouvinte->nome ?></p> 
     <p><?= $ouvinte->instituicao ?></p> 
     <p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p> 
     <p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p> 
    </div> 
<? endforeach; ?> 

Answer 2

我認爲這個問題是在浮動：左..這是一個大問題，但你可以找到一些技巧here

Answer 3

我遇到了類似的問題......（唯一的）工作解決方案是將條形碼放在表格中......因爲多頁面內容實際上只能用於表格（不削減內容或其他問題）。

嘗試是這樣的：

<table> 
<? foreach ($this->ouvintes as $ouvinte): ?> 
    <tr id="cod"> 
     <td><?= $ouvinte->nome ?></td> 
     <td><?= $ouvinte->instituicao ?></td> 
     <td>Cod. Barras: <?= $ouvinte->codigo_barras ?></td> 
     <td style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></td> 
    </tr> 
<? endforeach; ?> 
</table> 

Answer 4

嘗試設置page-break-inside到avoid：

div { 
    page-break-inside: avoid; 
}