Question

我正在设计一个网页界面，可以在Avery标签上打印条形码。什么是确保每个标签上的所有内容准确排列的最佳途径（使用英寸或厘米等物理测量有帮助？）更重要的是 - 如何确保每组标签都位于其自己的页面上而不会渗入另一页？

我当前的解决方案为每个页面使用一个表格，其大小与标签相匹配（尽可能最好，打印多余的页面最终会使条形码碰到标签）这个小凹凸阻止我添加条形码下的信息，因为它使凹凸变得更糟。我已经查看过page-break-after和page-break-before，但设置它们似乎没有效果。

提前致谢！

Answer 1

即使您没有提供任何代码，我也会采取措施：

首先，获取Selectivizr和jQuery，以便IE可以读取我们需要的CSS3内容：

Selectivizr：http://selectivizr.com/
jQuery：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个条形码后分页。如果我正确理解你的问题，这应该“永远有用”。

当然，我的测试系统数量有限......：）

除了分页后的Css打印控制＆amp;分页符，前

1 个答案: