Question

我正在尝试打印大量数据，这是Avery 5160 labels

的css

body {
    width: 8.27in;
    margin: 0in .2in;
}
.label {
    /* Avery 5160 labels */
    width: 3.24016in; /* plus .6 inches from padding */
    height: 1.381in; /* plus .125 inches from padding */
    padding: .125in 0 .05in .3in;
    margin-right: .515in; /* the gutter */

    float: left;

    /* text-align: center; */
    overflow: hidden;

    outline: 1px dotted;  /*outline doesn't occupy space like border does */
}

问题是，如果我打印16个标签，即1页，它很好地出来。但如果它转到第2页底部标签种类的作物和混乱第2页。

我在php中的测试代码

$max = 15; // if max then 15 :/ i cri
 $str1 = "<b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958";
for ($i=0; $i <= 16; $i++) { 
 echo'<div class="label">'. $str1.'</div>';
}

打印脚本

var t;
function prt()
{
    clearTimeout(t);
    window.print();
}
t=setTimeout("prt()",1000);

附加SS

附加完整来源Source

Answer 1

在我的预览中，如果我打印，它看起来不同。我认为这与打印机的余量有关。

无论如何，我将您的float:left;更改为display:inline-block并在14个元素后添加分页符。这对你有用吗？

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Artpro</title>
<style>
body {
    width: 8.27in;
    margin: 0in .2in;
}
.label {
    /* Avery 5160 labels */
    width: 3.24016in; /* plus .6 inches from padding */
    height: 1.381in; /* plus .125 inches from padding */
    padding: .125in 0 .05in .3in;
    margin-right: .515in; /* the gutter */

    display: inline-block;

    /*text-align: center;*/
    overflow: hidden;

    outline: 1px dotted;  /*outline doesn't occupy space like border does */
}
@media all {
    .page-break { display: none; }
}

@media print {
    .page-break { display: block; page-break-before: always; }
}
</style>

<script>
    var t;
    function prt()
    {
        clearTimeout(t);
        window.print();
    }
    t=setTimeout("prt()",1000);
</script>

</head>

<body>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
    <div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>

    <div class="label page-break"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
</body>
</html>

＆＃13;

Answer 2

我在循环中添加了一个div，它在每个页面上创建了14个标签。

这是编辑过的PHP代码：

和新添加的div的CSS：

$max = 15; // if max then 15 :/ i cri
$str1 = "<b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958";
for ($n=0; $n < 22; $n++) {
echo '<div class="a4sized">';
for ($i=0; $i < 14; $i++) {
    echo'<div class="label">'. $str1.'</div>';
}
echo '</div>';
}

我在google crome上使用以下设置进行了检查：纸张尺寸：A4，边距：无

打印Avery 5160标签时对齐问题

2 个答案: