У меня есть страница, которая генерирует купоны. Каждый купон - это div с высотой, изменяющейся в зависимости от содержимого. Я хочу печатать как можно больше купонов на каждой странице, но я не хочу, чтобы купоны были разделены на несколько страниц. Свойство CSS page-break-inside делает именно то, что мне нужно. Однако мне нужно это для работы в Firefox и/или Chrome. И это не поддерживается. Два года и год назад был задан тот же вопрос, и для этого не было хорошей альтернативы. Мы много разрабатываем CSS3/HTML5/общий браузер... есть ли альтернатива, чтобы заставить это работать?
Пример: http://jsfiddle.net/e3U66/2/
Предположим, что страница, при печати, измеряет 1000 пикселей. Я хочу, чтобы второй DIV появился на второй странице, потому что в противном случае он разделяется на первую и вторую. Этот код работает в Opera, но не в FF или Chrome.
Почему бы не после загрузки страницы содержимого использовать js для прокрутки содержимого и добавления высоты div s.
Как только вы достигнете 1000px или того, что вы определили как высоту страницы, вставьте пустой div стиль page-break-before перед последним div.
Честно говоря, я бы просто посоветовал создавать изображения фактически купонов или генерировать pdf. Я предполагаю, что вы, вероятно, генерируете штрих-коды для всех купонов уже, поэтому генерация фактически изображений не должна быть сложной с использованием php (или, что бы там ни было, выбор кода).
Вот некоторая информация о создании образа php, но SO, вероятно, будет лучшим источником для примеров.
http://php.net/manual/en/function.imagecreate.php
Затем вы можете просто перечислить изображения.
<img src>
<img src>
<img src>
...
Нет смысла воссоздать колесо.
Ниже решения, сделанного с помощью библиотеки Prototype (1.7)
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
//page height in px
//thisPageTotal is the total of pixels on the current page, in px
pageHeight = 1000;
thisPageTotal = 0;
Event.observe(window, 'load', function(){
$$('.coupon').each(function(el){
var layout = el.getLayout();
thisPageTotal += parseInt(layout.get('margin-box-height'));
if(thisPageTotal > pageHeight) {
thisPageTotal = parseInt(layout.get('margin-box-height'));
var pageBreak = new Element('div', {
'class': 'pagebreak'
});
el.insert({before: pageBreak});
}
//this shows the current amount of px on the current page
el.update(thisPageTotal);
});
});
</script>
<style type="text/css">
div {
border: 1px solid #000;
margin: 30px;
}
.pagebreak {
page-break-after: always;
}
</style>
</head>
<body>
<div id="div_1" class="coupon" style="height: 500px"></div>
<div id="div_2" class="coupon" style="height: 200px"></div>
<div id="div_3" class="coupon" style="height: 500px"></div>
<div id="div_4" class="coupon" style="height: 200px"></div>
<div id="div_5" class="coupon" style="height: 200px"></div>
<div id="div_6" class="coupon" style="height: 400px"></div>
<div id="div_7" class="coupon" style="height: 300px"></div>
<div id="div_8" class="coupon" style="height: 400px"></div>
<div id="div_9" class="coupon" style="height: 500px"></div>
<div id="div_10" class="coupon" style="height: 200px"></div>
</body>
</html>
Возможно, это помогает
установите float left для этих div и установите ширину как 100%. я не попробовал бы это., он может работать.